@import url('./tokens.css?v=c62e55ca1f2e');
@import url('./legacy-palette.css?v=dc79deb9a393');

/* Service page. Shared homepage components supply typography, colour and motion;
   these rules lay out the sections that only exist here. */
:is(.social-service-page, .service-page) .service-content-grid > * { min-width: 0; }
.service-followup { margin-top: 2.5rem; }
.service-heading-description { max-width: 800px; margin-inline: auto; }
.card-copy.service-byline { position: absolute; z-index: 1; left: -9000rem; }

/* Hero: the homepage night stage with this page's photograph. */
.service-hero-panel { position: relative; z-index: 1; display: grid; gap: 3rem; align-items: center; width: min(var(--content-width), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.service-hero-panel::before { content: ''; position: absolute; right: -4%; top: 12%; z-index: -1; width: 46%; aspect-ratio: 1; border-radius: 40%; background: conic-gradient(from var(--angle), var(--logo-cyan), var(--indigo), var(--logo-blue), var(--logo-cyan)); filter: blur(64px); opacity: .4; animation: spin-angle 14s linear infinite; pointer-events: none; }
.service-hero-content { align-items: flex-start; gap: 1.7rem; min-width: 0; }
.service-hero-content .hero-title { font-size: clamp(2.3rem, 4.4vw, 3.7rem); }
.service-hero-content .hero-cta { max-width: 100%; }
.service-hero-content .hero-cta svg { flex-shrink: 0; }
.service-hero-photo { max-width: 440px; margin-inline: auto; }
.service-photo-frame { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-xl); background: var(--surface); }
.service-photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; transition: transform 900ms var(--ease); }
.service-hero-photo .service-photo-frame { height: 100%; aspect-ratio: auto; border-radius: 0; }
.service-hero-photo .service-photo-frame img { object-position: 82% center; }

/* Summary and indicator cards. */
:is(.social-service-page, .service-page) .services-grid { display: grid; gap: 1.25rem; }
:is(.social-service-page, .service-page) .services-grid .reason { position: relative; display: grid; align-content: start; gap: .75rem; padding: 1.75rem; border: 1px solid var(--line); border-radius: 1.5rem; background: var(--white); box-shadow: var(--shadow-card); transition: opacity 700ms var(--ease), transform 450ms var(--ease), filter 700ms var(--ease), border-color 450ms, box-shadow 450ms; }
:is(.social-service-page, .service-page) .services-grid .reason.reveal-visible { transition-delay: var(--reveal-delay, 0ms); }
:is(.social-service-page, .service-page) .services-grid .reason-number { font-size: 2.25rem; line-height: 1.1; }
:is(.social-service-page, .service-page) .services-grid .reason-title { font-size: 1.2rem; }
:is(.social-service-page, .service-page) .services-grid .reason .card-copy { grid-column: auto; max-width: none; }

/* Value for the business: text beside a framed photograph. */
.service-figure { margin: 0; }
.service-figure .service-photo-frame { box-shadow: var(--shadow-card); }
.service-figure figcaption { margin-top: 1rem; text-align: center; }

/* Strategic value: context, then a before/after comparison. */
.service-strategy-intro { display: grid; gap: 2rem; align-items: center; margin-bottom: 2.75rem; }
.service-market-heading { min-width: 0; }
.service-strategy-art { width: 100%; max-width: 520px; margin: 0; justify-self: center; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.service-strategy-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.service-market-context { display: grid; gap: 1.5rem; }
.service-market-context > p { padding: 1.5rem; border: 1px solid color-mix(in srgb, var(--white) 80%, transparent); border-radius: 1.25rem; background: color-mix(in srgb, var(--white) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); max-width: none; }
.service-comparison-heading { display: grid; gap: 1rem; margin: 2.75rem 0 1.75rem; }
.service-comparison-heading .sc-title { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.service-comparison-head { display: none; }
.service-comparison-rows { display: grid; gap: .75rem; padding: 0; list-style: none; }
.service-comparison-row { position: relative; display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--white); box-shadow: 0 20px 50px -40px color-mix(in srgb, var(--logo-deep-blue) 50%, transparent); transition: opacity 700ms var(--ease), transform 450ms var(--ease), filter 700ms var(--ease), box-shadow 450ms; }
.service-comparison-row.reveal-visible { transition-delay: var(--reveal-delay, 0ms); }
.service-comparison-before, .service-comparison-after { display: flex; flex-direction: column; justify-content: center; padding: 1.5rem; }
.service-comparison-before .body-copy { color: var(--muted); }
.service-comparison-after { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .9rem; align-items: center; background: linear-gradient(120deg, color-mix(in srgb, var(--logo-blue) 9%, var(--white)), color-mix(in srgb, var(--logo-cyan) 12%, var(--white))); }
.service-comparison-after .body-copy { color: var(--ink); font-weight: 500; }
.service-comparison-topic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: .8rem; color: var(--white); background: var(--grad-button); box-shadow: var(--shadow-glow); }
.service-comparison-arrow { display: none; }
.service-comparison-mobile-label { margin-bottom: .6rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; line-height: 1.6; color: var(--muted); }
.service-comparison-after .service-comparison-mobile-label { grid-column: 1 / -1; margin-bottom: 0; color: var(--brand); }

/* Process: four numbered steps on white cards. */
.service-process-heading { display: grid; gap: 1.5rem; max-width: 1040px; margin-bottom: 3.5rem; }
.service-process-heading .section-title { max-width: 900px; }
.service-steps { margin: 0; padding: 0; list-style: none; }
.service-process .service-steps { gap: 1.25rem; }
.reasons .reason.service-step-card { display: block; min-width: 0; padding: 1.75rem; border: 1px solid var(--line); border-radius: 1.5rem; background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--shadow-card); }
.service-step-visual { position: relative; display: grid; place-items: center; width: 116px; aspect-ratio: 1; margin-bottom: 1.25rem; border-radius: 1.5rem; background: linear-gradient(140deg, color-mix(in srgb, var(--logo-blue) 10%, var(--white)), color-mix(in srgb, var(--logo-cyan) 16%, var(--white))); }
.service-step-visual > svg { width: 76px; height: auto; }
.service-step-visual .reason-number { position: absolute; top: -12px; right: -12px; display: grid; place-items: center; width: 42px; height: 42px; border: 4px solid var(--white); border-radius: 50%; background: var(--grad-button); -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: var(--white); color: var(--white); font-size: .9rem; }
.service-step-card .reason-title { margin-bottom: .6rem; font-size: 1.12rem; line-height: 1.4; }
.reasons .service-step-card .card-copy { max-width: none; }
.service-process-action { margin-top: 2.25rem; }
/* The inline illustrations predate the logo palette; recolour them in place. */
:is(.social-service-page, .service-page) svg :is([fill='#3129D4' i], [fill='#1479F8' i]) { fill: var(--logo-blue-dark); }
:is(.social-service-page, .service-page) svg :is([stroke='#3129D4' i], [stroke='#1479F8' i]) { stroke: var(--logo-blue-dark); }
:is(.social-service-page, .service-page) svg [fill='#FF735C' i] { fill: var(--logo-cyan); }
:is(.social-service-page, .service-page) svg [fill='#E9EEFF' i] { fill: color-mix(in srgb, var(--logo-blue) 12%, var(--white)); }
:is(.social-service-page, .service-page) svg [stroke='#E9EEFF' i] { stroke: color-mix(in srgb, var(--logo-blue) 16%, var(--white)); }

/* Plans and FAQ reuse the homepage cards. */
.service-plans .feature-row { align-items: flex-start; }
.service-plans .feature-row svg { flex-shrink: 0; margin-top: 5px; }
.service-plans .feature-text, .service-plans .featured-feature { line-height: 1.65; }
:is(.social-service-page, .service-page) .faq-title { max-width: none; }

/* Closing call: the homepage's living gradient card, with a photograph. */
main > .service-diagnostic { padding-block: clamp(2rem, 5vw, 4rem); background: var(--canvas); }
.service-diagnostic-banner { --ink: var(--white); --muted: color-mix(in srgb, var(--white) 86%, transparent); --line: color-mix(in srgb, var(--white) 26%, transparent); position: relative; display: grid; overflow: hidden; isolation: isolate; border-radius: 2.25rem; color: var(--ink); background: linear-gradient(125deg, var(--logo-navy), var(--logo-blue-dark) 45%, var(--logo-blue) 85%, var(--indigo) 115%); background-size: 160% 160%; box-shadow: 0 50px 110px -50px color-mix(in srgb, var(--logo-blue) 85%, transparent); animation: gradient-pan 14s ease-in-out infinite alternate; }
.service-diagnostic-photo { position: relative; display: block; min-width: 0; aspect-ratio: 16 / 10; }
.service-diagnostic-photo img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; }
.service-diagnostic-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--logo-navy)); pointer-events: none; }
.service-diagnostic-content { position: relative; z-index: 1; display: grid; justify-items: start; gap: 1.25rem; min-width: 0; padding: clamp(1.75rem, 4vw, 3.5rem); }
.service-diagnostic-content .service-diagnostic-title { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.15; }
.service-diagnostic-content .hero-cta { margin-top: .5rem; max-width: 100%; text-align: center; }
.service-diagnostic-content .hero-cta svg { flex-shrink: 0; width: 16px; height: 16px; }

/* Sources: a quiet disclosure at the end of the page. */
.service-references { padding-block: 1.25rem 2rem; background: var(--canvas); color: var(--muted); font-size: .75rem; line-height: 1.75; }
.service-sources summary { display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; padding: .5rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-pill); cursor: pointer; list-style: none; transition: border-color var(--duration), color var(--duration); }
.service-sources summary:hover { border-color: var(--brand); color: var(--brand); }
.service-sources summary::-webkit-details-marker { display: none; }
.service-sources summary::after { content: '+'; flex-shrink: 0; }
.service-sources[open] summary::after { content: '−'; }
.service-sources h2 { font: inherit; }
.service-sources ul { display: grid; gap: .4rem; margin-top: .9rem; }
.service-sources a { text-decoration: underline; text-underline-offset: 3px; }
.service-sources a:hover { color: var(--brand); }
.service-sources summary:focus-visible, .service-sources a:focus-visible { outline: 2px solid var(--button-bg); outline-offset: 4px; }

@media (hover: hover) and (pointer: fine) {
  :is(.social-service-page, .service-page) .services-grid .reason:hover, .reasons .service-step-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--logo-blue) 45%, var(--white)); background: var(--white); box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--logo-blue) 70%, transparent); transition-delay: 0ms; }
  .service-comparison-row:hover { transform: translateX(6px); box-shadow: var(--shadow-card); transition-delay: 0ms; }
  .service-figure:hover .service-photo-frame img { transform: scale(1.04); }
}
@media (min-width: 600px) {
  .service-market-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-process .service-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-comparison-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: .9rem; }
  .service-comparison-head > p { padding-inline: 1.5rem; font-size: .95rem; }
  .service-comparison-head > p:last-child { padding-left: 2.25rem; color: var(--brand); }
  .service-comparison-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-comparison-after { padding-left: 2.25rem; }
  .service-comparison-arrow { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid var(--white); border-radius: 50%; color: var(--white); background: var(--grad-brand); transform: translate(-50%, -50%); }
  .service-comparison-mobile-label { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 900px) {
  .service-hero-panel { grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); }
  .service-hero-photo { max-width: 480px; margin-inline: 0; justify-self: end; }
  :is(.social-service-page, .service-page) .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :is(.social-service-page, .service-page) .service-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
  .service-strategy-intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; }
  .service-diagnostic-banner { grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); }
  .service-diagnostic-photo { aspect-ratio: auto; min-height: 380px; }
  .service-diagnostic-photo::after { background: linear-gradient(90deg, transparent 45%, var(--logo-navy)); }
}
@media (min-width: 1101px) {
  .service-process .service-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :is(.social-service-page, .service-page) .service-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .service-hero-panel::before { display: none; }
}