.services-intro { padding-top:48px; padding-bottom:28px; }
.services-intro h1 { margin-bottom:20px; font-size:clamp(48px,6vw,86px); }
.services-intro .lede { max-width:44ch; }
.service-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-bottom:0; scroll-margin-top:100px; }
.service-tabs a { display:flex; align-items:center; justify-content:center; min-height:76px; padding:18px 22px; text-align:center; font-size:16px; font-weight:600; line-height:1.4; border:1px solid #bcc8bd; border-right:0; text-decoration:none; color:var(--ink); background:#f1f1e9; }
.service-tabs a:last-child { border-right:1px solid #bcc8bd; }
.service-tabs [aria-selected="true"] { background:#164f3e; color:#fff; border-color:#164f3e; }
.service-tabs a:focus-visible { position:relative; outline:3px solid #943b4b; outline-offset:3px; z-index:2; }
[data-service-panel][hidden] { display:none; }
[data-service-panel] { scroll-margin-top:110px; }
.page--services [id] { scroll-margin-top:110px; }
.service-panel__intro { padding-block:36px 24px; }
.service-panel__intro h2 { font-size:clamp(35px,4.5vw,62px); }
.service-panel__intro .section-intro { max-width:65ch; }
.platform-links { display:flex; flex-wrap:wrap; gap:16px 28px; padding-top:14px; }
.platform-links a { font-weight:600; text-decoration:none; border-bottom:1px solid #9eac9f; padding-block:10px; }
.platform-links span { margin-left:16px; }
.service-platform__heading { padding-block:32px; }
.service-platform__heading h2 { font-size:clamp(30px,3vw,46px); max-width:23ch; }
.service-platform__heading .section-intro { max-width:65ch; }
.instagram-case__intro { display:grid; grid-template-columns:1fr 1.35fr; gap:60px; align-items:start; margin-bottom:32px; }
.instagram-case__intro .section-intro { margin:0; }
.instagram-creators { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; align-items:start; }
.instagram-creators figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.instagram-creators img { width:auto; max-width:100%; height:270px; object-fit:contain; }
.instagram-creators figcaption, .instagram-cities figcaption { color:#536454; font-size:13px; line-height:1.5; }
.instagram-case__note { margin-block:30px 20px; max-width:65ch; font-size:15px; }
.instagram-cities { margin:0 0 28px; max-width:1000px; }
.instagram-cities img { width:100%; height:auto; }
.instagram-cities figcaption { padding-top:12px; }
.bixdo-card { display:grid; grid-template-columns:1fr 1.35fr; gap:60px; align-items:center; padding-block:38px; border-block:1px solid #cbd1c5; margin-bottom:36px; }
.bixdo-card__mark { font-size:52px; font-weight:700; letter-spacing:-.05em; }
.bixdo-card__mark span { font-size:26px; letter-spacing:0; margin-left:12px; }
.bixdo-card h3 { font-size:28px; margin-bottom:12px; }
.bixdo-card p { max-width:50ch; }
.page--services .page-hero { margin-top:40px; }
.page--services .page-hero h2.display { font-size:clamp(38px,5vw,72px); }
@media(max-width:820px) {
 .services-intro { padding-top:40px; }
 .service-tabs a { font-size:14px; padding:16px 12px; }
 .instagram-case__intro, .bixdo-card { gap:28px; }
 .instagram-creators { gap:18px; }
 .instagram-creators img { height:210px; }
}
@media(max-width:620px) {
 .services-intro { padding-top:32px; padding-bottom:20px; }
 .services-intro h1 { font-size:48px; }
 .service-tabs a { font-size:12px; padding:14px 8px; min-height:72px; }
 .service-panel__intro { padding-block:28px 20px; }
 .platform-links { gap:10px 22px; }
 .platform-links a { font-size:14px; }
 .service-platform__heading { padding-block:30px 20px; }
 .instagram-case__intro, .bixdo-card { grid-template-columns:1fr; gap:18px; }
 .instagram-case__intro { margin-bottom:24px; }
 .instagram-creators { grid-template-columns:1fr; gap:28px; }
 .instagram-creators img { height:auto; max-height:310px; }
 .instagram-creators figure:nth-child(2) img { max-height:none; }
 .bixdo-card { margin-inline:20px; width:calc(100% - 40px); padding-block:28px; }
 .page--services .page-hero { margin-top:28px; }
}

/* Platform chapters are identifiable before visitors reach individual cases. */
#instagram { --platform-ink:#174c3c; --platform-wash:#edf3ed; --platform-accent:#174c3c; }
#rednote { --platform-ink:#482d35; --platform-wash:#f6eeeb; --platform-accent:#793748; }
.service-platform { background:var(--platform-wash); color:var(--platform-ink); }
.page--services .service-platform > .section { background:transparent; color:var(--platform-ink); }
.service-platform .section-heading, .service-platform .section-intro { color:var(--platform-ink); }
.service-platform .kicker, .service-platform .metric strong, .service-platform .text-link { color:var(--platform-accent); }
.service-platform .metric span { color:var(--platform-ink); }
.service-platform .metric-row, .service-platform .metric { border-color:color-mix(in srgb,var(--platform-accent) 25%,transparent); }
.service-platform > .service-platform__heading { display:grid; grid-template-columns:1fr 1fr; column-gap:64px; width:100%; padding:32px max(24px,calc((100% - 1256px)/2)); background:var(--platform-accent); color:#fff; }
.service-platform__heading .eyebrow { grid-column:1; margin-bottom:12px; color:#f2e7e1; }
.service-platform > .service-platform__heading h2 { grid-column:1; margin:0; max-width:none; font-size:60px; color:#fff; }
.service-platform__heading h2 span { font-family:var(--sans); font-size:.45em; font-weight:500; }
.service-platform__heading .platform-deck { grid-column:1; margin:12px 0 0; font-size:18px; color:#fff; }
.service-platform__heading .section-intro { grid-column:2; grid-row:1 / 4; align-self:center; margin:0; color:#fff; font-size:18px; line-height:1.6; max-width:44ch; }
.platform-links { gap:12px; }
.platform-links a { padding:12px 20px; border:1px solid #174c3c; background:#edf3ed; color:#174c3c; transition:background-color 180ms ease,color 180ms ease; }
.platform-links a[href="#rednote"] { border-color:#793748; background:#f6eeeb; color:#793748; }
.platform-links a:hover, .platform-links a:focus-visible { background:#174c3c; color:#fff; }
.platform-links a[href="#rednote"]:hover, .platform-links a[href="#rednote"]:focus-visible { background:#793748; color:#fff; }
@media(max-width:620px) {
 .service-platform > .service-platform__heading { grid-template-columns:1fr; padding:28px 20px; row-gap:0; }
 .service-platform > .service-platform__heading h2 { font-size:44px; }
 .service-platform__heading .platform-deck { font-size:17px; }
 .service-platform__heading .section-intro { grid-column:1; grid-row:auto; margin-top:16px; font-size:15px; }
 .platform-links a { padding:10px 14px; }
}