/* Services page, scoped to .services-preview. Uses the site tokens from style.css.
   Type hierarchy as on the other pages: page title --fs-h1, section headings --fs-h2, service names --fs-h3,
   the line under a service name --fs-lead (like a case subtitle), text --fs-body, labels --fs-label.
   Tokens:
   12-column grid (--margin, --gutter), spacing steps (--space-*), colours (--ink, --muted, --line, --accent), type scale and --radius. */
.services-preview{padding:65px var(--margin) var(--space-section);font-size:var(--fs-body);line-height:1.5}
.services-preview h1,.services-preview h2,.services-preview h3,.services-preview h4{font-family:var(--font-display);font-weight:500;font-synthesis:none}
.services-preview h1{max-width:1180px;margin:var(--space-block) 0 0;font-size:var(--fs-h1);line-height:.95;letter-spacing:-.03em;text-wrap:balance}
.services-preview h2{max-width:650px;font-size:var(--fs-h2);line-height:1;letter-spacing:-.025em}
.services-preview h3,.services-preview h4{font-size:var(--fs-h3);line-height:1.12;letter-spacing:-.015em}
.services-preview p+p{margin-top:16px}
.services-preview .eyebrow{color:var(--ink);font-size:var(--fs-label);line-height:1.4;letter-spacing:.03em;text-transform:uppercase}

/* Intro: headline, then the lead text on the content column */
.sp-hero{padding-bottom:var(--space-head)}
.sp-hero-image{margin-top:var(--space-head);aspect-ratio:16/9;border-radius:var(--radius)}
@media(min-width:801px){.sp-hero-image{aspect-ratio:21/9}}
@media(max-width:560px){.sp-hero-image{aspect-ratio:4/5}}
.sp-hero-intro{margin-top:var(--space-head)}
.sp-hero-intro .eyebrow{margin:0}
.sp-hero-copy{max-width:660px;font-size:var(--fs-lead);line-height:1.35;letter-spacing:-.01em}

/* Buttons and links follow the footer button and the site's text links */
.sp-button{display:inline-block;padding:12px 20px;border-radius:999px;background:var(--ink);color:var(--bg);font-size:var(--fs-label);letter-spacing:.03em;line-height:1.4;text-transform:uppercase;transition:background-color .2s,color .2s}
.sp-button:hover,.sp-button:focus-visible{background:var(--accent);color:var(--bg)}
.sp-link{display:inline-block;padding:8px 0;text-decoration:underline;text-underline-offset:5px;transition:color .2s}
.sp-link:hover{color:var(--accent)}

/* Expandable services */
.sp-services{border-top:1px solid var(--line)}
.sp-service{border-bottom:1px solid var(--line)}
.sp-service-summary{display:flex;align-items:center;justify-content:space-between;gap:var(--gutter);padding:var(--space-line) 0;list-style:none;cursor:pointer;transition:color .2s}
.sp-service-summary::-webkit-details-marker{display:none}
.services-preview .sp-service-summary h2{font-size:var(--fs-h3);line-height:1.12;letter-spacing:-.015em}
.sp-service-summary:hover,.sp-service-summary:focus-visible{color:var(--accent)}
.sp-service-summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.sp-service-arrow{flex-shrink:0;transition:transform .2s ease}
.sp-service[open] .sp-service-arrow{transform:rotate(180deg)}
.services-preview .sp-service-heading h3{max-width:30ch;font-family:'DM Sans',Arial,Helvetica,sans-serif;font-size:var(--fs-lead);font-weight:400;line-height:1.35;letter-spacing:-.01em}
.sp-service-body{max-width:660px}
.sp-deliverables{display:flex;flex-wrap:wrap;gap:8px 18px;margin:24px 0 0;padding:16px 0 0;border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-small);list-style:none}

/* "Develop with us" offer as a paragraph in the service text */
.sp-application{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);color:var(--ink)}
.services-preview .sp-application .eyebrow{margin:0}
.sp-application h4{margin:10px 0 0;font-family:inherit;font-size:inherit;font-weight:500;letter-spacing:0}
.sp-application p:not(.eyebrow){margin:8px 0 0}
.sp-application-cta{display:inline-block;margin-top:16px;border-bottom:1px solid var(--line);padding-bottom:4px;font-size:var(--fs-label);letter-spacing:.03em;text-transform:uppercase;transition:color .2s,border-color .2s}
.sp-application-cta:hover,.sp-application-cta:focus-visible{color:var(--accent);border-color:var(--accent)}

/* Label/content split on the site grid: left over columns 1-4, content from column 5 */
.sp-split{padding:var(--space-line) 0 0;border-top:1px solid var(--line)}

.sp-service-content{padding:0 0 var(--space-head)}
@media(min-width:801px){
  .sp-split,.sp-service-content{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)}
  .sp-split>:not(:first-child),.sp-service-content>:not(:first-child){grid-column:2/-1}
  .sp-hero-intro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter);align-items:start}
  .sp-hero-copy{grid-column:2/-1}
}
@media(max-width:800px){
  .sp-split,.sp-service-content,.sp-hero-intro{display:flex;flex-direction:column;gap:var(--space-line)}
}

.services-preview [id]{scroll-margin-top:180px}
.sp-skip{position:fixed;left:20px;top:-100px;z-index:100;padding:12px;border-radius:var(--radius);background:var(--ink);color:var(--bg)}
.sp-skip:focus{top:12px}

/* Service statements use the muted text colour. */
.services-preview .sp-service-heading h3{color:var(--muted)}