/* The lower page: a connected process, readable answers and a clear next step. */
.marketing-page .method-section { padding-block-end: 5rem; }
.marketing-page .process-grid { gap: 0; }
.marketing-page .process-grid > li { position: relative; display: flex; flex-direction: column; padding: 0 2rem 0 0; border: 0; }
.marketing-page .process-grid > li:last-child { padding-inline-end: 0; }
.marketing-page .process-grid > li::before,
.marketing-page .process-grid > li::after { content: ''; position: absolute; inset-block-start: 28px; inset-inline: 56px 0; block-size: 1px; background: var(--line-strong); transform-origin: left; }
.marketing-page .process-grid > li::after { background: var(--violet-text); }
.marketing-page .process-grid > li:last-child::before,
.marketing-page .process-grid > li:last-child::after { display: none; }
.marketing-page .process-grid .step-marker { position: relative; z-index: 1; flex-shrink: 0; inline-size: 56px; block-size: 56px; background: var(--violet-text); border-color: var(--violet-text); color: var(--paper); font-size: .875rem; }
.marketing-page .process-grid h3 { margin-block: 1.5rem .875rem; max-inline-size: 20ch; font-size: 1.5rem; line-height: 1.25; }
.marketing-page .process-grid p { flex: 1; max-inline-size: 30ch; font-size: .9375rem; line-height: 1.75; }
.step-outcome { margin-block-start: 1.5rem; padding-block-start: 1rem; max-inline-size: 30ch; border-block-start: 1px solid var(--line); color: var(--violet-text); font-size: .8125rem; line-height: 1.6; }
.marketing-page .technical-details { margin-block-start: 3rem; padding-inline: 1.5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.marketing-page .technical-details summary { min-block-size: 88px; gap: 1.5rem; }
.marketing-page .technical-details summary > span { color: var(--ink); font-size: 1rem; line-height: 1.5; transform: none; }
.technical-details summary small { display: block; margin-block-start: .3rem; color: var(--muted); font-size: .875rem; font-weight: 400; }
.marketing-page .technical-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; max-inline-size: none; padding-block: .25rem 1.5rem; }
.technical-content h3 { margin-block-end: .75rem; color: var(--ink); font-size: 1.125rem; font-weight: 500; letter-spacing: -.015em; }
.technical-content p { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.8; }
.technology-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.technology-list li { padding: .4rem .7rem; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); font-size: .75rem; }
.disclosure-icon { inline-size: 24px; block-size: 24px; flex: 0 0 24px; fill: none; stroke: var(--violet-text); stroke-width: 1.5; stroke-linecap: round; }
details[open] > summary > .disclosure-icon { transform: rotate(45deg); }

/* Accessibility belongs to the service itself, with concrete capabilities. */
.marketing-page .accessibility-section { padding: clamp(1.5rem, 4vw, 3.5rem); gap: clamp(2rem, 5vw, 4rem); border: 0; border-radius: 16px; background: var(--surface-accent); }
.marketing-page .accessibility-intro h2 { font-size: clamp(2rem, 3.6vw, 3.5rem); max-inline-size: 17ch; color: var(--ink); }
.marketing-page .accessibility-intro > p { font-size: .9375rem; line-height: 1.8; }
.marketing-page .accessibility-points li { grid-template-columns: 48px minmax(0, 1fr); gap: 1.125rem; padding-block: 1.5rem; border-color: var(--line-accent); }
.marketing-page .accessibility-points li:first-child { border-block-start: 0; }
.marketing-page .accessibility-points li:last-child { border-block-end: 0; }
.marketing-page .accessibility-points .accessibility-symbol { display: grid; place-items: center; padding: 0; inline-size: 48px; block-size: 48px; border: 1px solid var(--line-accent); border-radius: 12px; background: var(--paper); color: var(--violet-text); }
.accessibility-symbol svg { inline-size: 28px; block-size: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.marketing-page .accessibility-points h3 { font-size: 1.125rem; letter-spacing: -.015em; }
.marketing-page .accessibility-points p { font-size: .875rem; line-height: 1.8; }

/* Native details remain useful without JavaScript or animation support. */
.marketing-page .faq-section { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); padding-block: 1rem 5.5rem; }
.marketing-page .faq-title h2 { font-size: clamp(2rem, 3.5vw, 3.25rem); max-inline-size: 15ch; margin-block-end: 1.25rem; }
.faq-title > p { max-inline-size: 32ch; margin: 0 0 1.25rem; color: var(--muted); font-size: .9375rem; line-height: 1.8; }
.faq-title .text-link { min-block-size: 48px; color: var(--violet-text); }
.marketing-page .faq-items details { padding-inline: 1.25rem; border-color: var(--line-strong); }
.marketing-page .faq-items details[open] { background: var(--surface-accent); border-radius: 12px; border-color: transparent; }
.marketing-page .faq-items details[open] + details { border-block-start-color: transparent; }
.marketing-page .faq-items summary { min-block-size: 84px; padding-block: 1.5rem; gap: 1.5rem; font-size: 1rem; line-height: 1.55; font-weight: 500; }
.marketing-page .faq-items p { max-inline-size: 60ch; padding: 0 2.5rem 1.5rem 0; font-size: .9375rem; line-height: 1.8; }
.marketing-page .faq-items p a { color: var(--violet-text); text-decoration: underline; text-underline-offset: .2em; }

/* An appointment is a separate, clearly labelled action. */
.marketing-page .appointment-section { --appointment-paper: #fdfbff; --appointment-muted: #e4d9f5; padding-block: 4.5rem; background: #3d226b; border: 0; }
html[data-theme=dark] .marketing-page .appointment-section { background: #211331; }
.marketing-page .appointment-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); }
.marketing-page .appointment-copy h2 { color: var(--appointment-paper); font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.15; max-inline-size: 16ch; }
.marketing-page .appointment-copy > p { color: var(--appointment-muted); font-size: .9375rem; max-inline-size: 38ch; }
.appointment-duration { display: inline-flex; align-items: center; gap: .625rem; margin-block-start: 1.5rem; color: var(--appointment-muted); font-size: .8125rem; line-height: 1.65; }
.appointment-duration svg { inline-size: 20px; block-size: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.marketing-page .appointment-options { gap: 1rem; }
.marketing-page .appointment-choice { grid-template-columns: minmax(0, 1fr) 28px; min-block-size: 188px; padding: 1.5rem; border-color: transparent; background: var(--paper); border-radius: 16px; row-gap: 1.25rem; }
.marketing-page .appointment-choice > svg:first-child { inline-size: 32px; block-size: 32px; }
.marketing-page .appointment-choice-copy strong { font-size: 1.1875rem; }
.marketing-page .appointment-choice-copy small { font-size: .875rem; }
.marketing-page .appointment-choice > .appointment-choice-arrow { grid-row: 1; align-self: start; inline-size: 28px; block-size: 28px; padding: 4px; border: 1px solid var(--line-accent); border-radius: 50%; }
.marketing-page .appointment-choice:focus-visible { outline-color: #e4d9f5; }
.marketing-page .appointment-options > .appointment-note { color: var(--appointment-muted); font-size: .8125rem; margin-block-start: .25rem; }

/* A form that responds to the field or service being edited. */
.marketing-page .contact-section { padding-block: 5.5rem; }
.marketing-page .contact-copy h2 { max-inline-size: 14ch; }
.marketing-page .contact-next-steps { margin-block-start: 2rem; }
.marketing-page .contact-next-steps li { padding-block-end: 1.25rem; }
.marketing-page .contact-next-steps li > span { border-radius: 8px; }
.marketing-page .contact-next-steps li:not(:last-child)::before { display: none; }
.marketing-page .form-heading { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; column-gap: 1rem; }
.marketing-page .form-heading h3 { grid-column: 1; grid-row: 1; }
.marketing-page .form-heading p { grid-column: 1; grid-row: 2; }
.form-heading-icon { display: grid; place-items: center; grid-column: 2; grid-row: 1 / 3; inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--surface-accent); color: var(--violet-text); }
.form-heading-icon svg { inline-size: 24px; block-size: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.marketing-page .contact-form .field > label { transition: color 160ms; }
.marketing-page .contact-form .field:focus-within > label { color: var(--violet-text); }
.marketing-page .contact-form .field:has([aria-invalid=true]) > label { color: var(--error); }
.marketing-page .contact-form .offer-options input:checked + span { border-color: var(--violet-text); background: var(--surface-accent); }
.marketing-page .contact-form :is(input, textarea):user-valid { border-color: var(--violet-text); }
.marketing-page .contact-form .form-submit { gap: .75rem; }
.marketing-page .form-privacy { padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); }

/* The footer separates the brand, useful pages and the return action. */
.marketing-page .journey-footer { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2.5rem 4rem; padding-block: 3.5rem 6rem; }
.footer-identity > .brand { color: var(--ink); display: inline-flex; font-size: 2.75rem; letter-spacing: -.04em; line-height: 1.2; }
.footer-identity > p { margin: .875rem 0 0; color: var(--muted); font-size: .9375rem; line-height: 1.7; }
.marketing-page .journey-footer nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 2rem; align-content: start; }
.marketing-page .journey-footer nav :is(a, button) { justify-content: start; text-align: start; font-size: .8125rem; line-height: 1.6; min-block-size: 44px; padding-block: .5rem; }
.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-block-start: 1px solid var(--line); padding-block-start: 1rem; font-size: .75rem; }
.footer-top { display: inline-flex; align-items: center; gap: .625rem; min-block-size: 44px; }
.footer-top svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
  .marketing-page .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 0; }
  .marketing-page .process-grid > li:nth-child(2)::before, .marketing-page .process-grid > li:nth-child(2)::after { display: none; }
  .marketing-page .accessibility-section { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .marketing-page .accessibility-intro { max-inline-size: 640px; }
  .marketing-page .accessibility-intro > p { max-inline-size: 60ch; }
  .marketing-page .accessibility-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .marketing-page .accessibility-points li { grid-template-columns: minmax(0, 1fr); gap: 1rem; border: 0; }
  .marketing-page .appointment-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .marketing-page .appointment-copy h2 { max-inline-size: none; }
  .marketing-page .appointment-copy > p { max-inline-size: 50ch; }
}
@media (max-width: 700px) {
  .marketing-page .faq-section { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block-end: 3.5rem; }
  .marketing-page .faq-title h2 { max-inline-size: none; }
  .faq-title > p { max-inline-size: 40ch; }
  .marketing-page .technical-content { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
@media (max-width: 600px) {
  .marketing-page .method-section { padding-block-end: 3rem; }
  .marketing-page .process-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .marketing-page .process-grid > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: .75rem 1.25rem; padding: 0 0 2rem; }
  .marketing-page .process-grid > li:last-child { padding-block-end: 0; }
  .marketing-page .process-grid > li::before, .marketing-page .process-grid > li::after { inset-block: 44px 0; inset-inline: 22px auto; inline-size: 1px; block-size: auto; transform-origin: top; }
  .marketing-page .process-grid > li:nth-child(2)::before, .marketing-page .process-grid > li:nth-child(2)::after { display: block; }
  .marketing-page .process-grid .step-marker { grid-column: 1; grid-row: 1 / 4; inline-size: 44px; block-size: 44px; padding: 0; }
  .marketing-page .process-grid h3 { grid-column: 2; margin: .5rem 0 0; font-size: 1.25rem; }
  .marketing-page .process-grid p { grid-column: 2; max-inline-size: none; font-size: .9375rem; }
  .step-outcome { grid-column: 2; margin: 0; padding-block-start: .5rem; max-inline-size: none; border: 0; font-size: .8125rem; }
  .marketing-page .technical-details { padding-inline: 1rem; margin-block-start: 2rem; }
  .technical-details summary small { max-inline-size: 22ch; }
  .marketing-page .accessibility-section { padding: 1.5rem; }
  .marketing-page .accessibility-intro h2 { font-size: 2rem; }
  .marketing-page .accessibility-actions { align-items: start; gap: .5rem 1rem; }
  .marketing-page .accessibility-points { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .marketing-page .accessibility-points li { grid-template-columns: 40px minmax(0, 1fr); gap: 1rem; padding-block: 1.25rem; border-block-start: 1px solid var(--line-accent); }
  .marketing-page .accessibility-points .accessibility-symbol { inline-size: 40px; block-size: 40px; border-radius: 10px; }
  .accessibility-symbol svg { inline-size: 24px; block-size: 24px; }
  .marketing-page .faq-items details { padding-inline: .875rem; }
  .marketing-page .faq-items summary { min-block-size: 76px; gap: 1rem; font-size: .9375rem; }
  .marketing-page .faq-items p { padding-inline-end: 0; font-size: .875rem; }
  .marketing-page .appointment-section { padding-block: 3rem; }
  .marketing-page .appointment-copy h2 { font-size: 2rem; }
  .marketing-page .appointment-choice { grid-template-columns: 26px minmax(0, 1fr) 24px; min-block-size: 118px; padding: 1.25rem; column-gap: 1rem; row-gap: 0; }
  .marketing-page .appointment-choice > svg:first-child { inline-size: 26px; block-size: 26px; }
  .marketing-page .appointment-choice-copy strong { font-size: 1.0625rem; }
  .marketing-page .appointment-choice > .appointment-choice-arrow { align-self: center; inline-size: 24px; block-size: 24px; padding: 3px; }
  .marketing-page .contact-section { padding-block: 3.5rem; }
  .marketing-page .form-heading { grid-template-columns: minmax(0, 1fr) 36px; gap: .5rem; }
  .form-heading-icon { inline-size: 36px; block-size: 36px; }
  .form-heading-icon svg { inline-size: 20px; block-size: 20px; }
  .marketing-page .form-heading h3 { font-size: 1.5rem; }
  .marketing-page .journey-footer { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding-block: 2.5rem 5rem; }
  .footer-identity > .brand { font-size: 2.5rem; }
  .marketing-page .journey-footer nav { gap: .25rem 1rem; }
}

/* One arrival per step; the observer is shared with the existing page. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) .process-grid > .reveal.is-observed { opacity: 1; transform: none; transition: none; }
  html:not(.reduce-motion) .process-grid > .is-observed::after { transform: scaleX(0); transition: transform 800ms cubic-bezier(.16,1,.3,1); }
  html:not(.reduce-motion) .process-grid > .is-observed.is-visible::after { transform: scaleX(1); }
  html:not(.reduce-motion) .process-grid > .is-observed > .step-marker { background: var(--surface-accent); color: var(--violet-text); transform: scale(.92); transition: transform 650ms cubic-bezier(.16,1,.3,1), color 400ms, background-color 400ms; }
  html:not(.reduce-motion) .process-grid > .is-observed.is-visible > .step-marker { background: var(--violet-text); color: var(--paper); transform: scale(1); }
  html:not(.reduce-motion) .process-grid > .is-observed > :is(h3,p,.step-outcome) { transform: translateY(8px); transition: transform 700ms cubic-bezier(.16,1,.3,1); }
  html:not(.reduce-motion) .process-grid > .is-observed.is-visible > :is(h3,p,.step-outcome) { transform: none; }
  html:not(.reduce-motion) .disclosure-icon { transition: transform 280ms cubic-bezier(.16,1,.3,1); }
  html:not(.reduce-motion) .appointment-choice { transition: transform 300ms cubic-bezier(.16,1,.3,1), background-color 160ms; }
  html:not(.reduce-motion) .appointment-choice > svg:first-child { transition: transform 400ms cubic-bezier(.16,1,.3,1); }
  html:not(.reduce-motion) .offer-options input:checked + span { animation: choice-settle 260ms cubic-bezier(.16,1,.3,1); }
  html:not(.reduce-motion) .contact-form .field input,
  html:not(.reduce-motion) .contact-form .field textarea { transition: background-color 180ms, border-color 180ms; }
  @supports (interpolate-size: allow-keywords) and (transition-behavior: allow-discrete) and selector(details::details-content) {
    /* Native intrinsic-height animation; older browsers simply open the details. */
    html:not(.reduce-motion) :is(.faq-items details, .technical-details, .company-details) { interpolate-size: allow-keywords; }
    html:not(.reduce-motion) :is(.faq-items details, .technical-details, .company-details)::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size 320ms cubic-bezier(.16,1,.3,1), opacity 220ms, content-visibility 320ms allow-discrete; }
    html:not(.reduce-motion) :is(.faq-items details, .technical-details, .company-details)[open]::details-content { block-size: auto; opacity: 1; }
  }
}
@media (min-width: 601px) and (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) .process-grid > :nth-child(2) { --step-delay: 140ms; }
  html:not(.reduce-motion) .process-grid > :nth-child(3) { --step-delay: 280ms; }
  html:not(.reduce-motion) .process-grid > :nth-child(4) { --step-delay: 420ms; }
  html:not(.reduce-motion) .process-grid > .is-observed::after,
  html:not(.reduce-motion) .process-grid > .is-observed > :is(.step-marker,h3,p,.step-outcome) { transition-delay: var(--step-delay, 0ms); }
}
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) .process-grid > .is-observed::after { transform: scaleY(0); }
  html:not(.reduce-motion) .process-grid > .is-observed.is-visible::after { transform: scaleY(1); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:not(.reduce-motion) .appointment-choice:hover { transform: translateY(-4px); }
  html:not(.reduce-motion) .appointment-choice:hover > svg:first-child { transform: rotate(-7deg); }
}
@keyframes choice-settle { from { transform: scale(.985); } to { transform: scale(1); } }
@media (forced-colors: active) {
  .marketing-page .appointment-section { background: Canvas; }
  .marketing-page .appointment-section :is(h2,p,span) { color: CanvasText; }
  .marketing-page .process-grid .step-marker, .marketing-page .appointment-choice, .marketing-page .accessibility-section { border: 1px solid CanvasText; }
}