/* Shared surfaces for About, AI Strategy and the homepage invitation. */
.about-intro, .strategy-hero { padding: clamp(4rem, 8vw, 7rem) 0; color: #f9f7ff; background: radial-gradient(ellipse at 82% 10%, #48305e 0%, #211b35 48%, #151424 100%); }
.about-intro__layout, .strategy-hero__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .75fr); gap: clamp(3rem, 7vw, 7rem); align-items: end; }
.about-intro h1, .strategy-hero h1 { max-width: 14ch; margin: 1rem 0 1.5rem; color: #fff; font-size: clamp(2.8rem, 5.3vw, 5.25rem); line-height: 1.04; letter-spacing: -.045em; }
.about-intro p:not(.about-eyebrow), .strategy-hero p:not(.strategy-eyebrow) { max-width: 38rem; color: #e0deed; line-height: 1.7; }
.about-intro__note, .strategy-hero__note { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid #796988; border-radius: .8rem; background: rgba(49, 39, 65, .8); }
.about-intro__note h2, .strategy-hero__note h2 { color: #fff; font-size: clamp(1.65rem, 2.5vw, 2.25rem); line-height: 1.2; }
.about-intro__note a, .strategy-hero a:not(.strategy-button) { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.strategy-hero__back, .strategy-hero__jump { display: block; width: fit-content; margin: 0 0 1.5rem; }
.strategy-hero__jump { margin: 1.5rem 0 0; }
.about-eyebrow, .strategy-eyebrow, .Home .home-invitation__eyebrow { margin: 0 0 1rem; color: #80e8e9 !important; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.about-button, .strategy-button, .Home .home-invitation__actions a:first-child { display: inline-flex; align-items: center; gap: 1.2rem; min-height: 3.5rem; padding: .9rem 1.35rem; border-radius: .35rem; background: #f9cf68; color: #211a2e; font-weight: 700; text-decoration: none; }
.about-button:hover, .strategy-button:hover, .Home .home-invitation__actions a:first-child:hover { background: #ffe09a; color: #211a2e; }
.about-approach, .about-services, .about-next, .strategy-intro, .strategy-work, .strategy-example, .strategy-next, .Home .home-invitation { padding: clamp(4rem, 7vw, 7rem) 0; }
.about-approach, .strategy-work, .strategy-intro { color: #211a2e; background: #f5f1ea; }
.about-services, .strategy-example { color: #f9f7ff; background: #292139; }
.about-next, .strategy-next, .Home .home-invitation { color: #211a2e; background: #e9ddec; }
.about-approach .about-eyebrow, .about-next .about-eyebrow, .strategy-intro .strategy-eyebrow, .strategy-work .strategy-eyebrow, .strategy-next .strategy-eyebrow, .Home .home-invitation__eyebrow { color: #634873 !important; }
.about-approach h2, .about-services h2, .about-next h2, .strategy-intro h2, .strategy-work h2, .strategy-example h2, .strategy-next h2, .Home .home-invitation h2 { max-width: 22ch; margin: .75rem 0 1.25rem; font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.1; letter-spacing: -.035em; }
.about-approach h2, .about-next h2, .strategy-intro h2, .strategy-work h2, .strategy-next h2, .Home .home-invitation h2 { color: #211a2e; }
.about-services h2, .strategy-example h2 { color: #fff; }
.about-approach p, .about-next p, .strategy-intro p, .strategy-work p, .strategy-next p, .Home .home-invitation p:not(.home-invitation__eyebrow) { color: #504658; line-height: 1.7; }
.about-services p, .strategy-example p { color: #e5dfea; line-height: 1.7; }
.about-approach__grid, .strategy-work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.about-approach__grid > *, .strategy-work__grid > * { min-width: 0; padding: clamp(1.5rem, 2.5vw, 2.25rem); border: 1px solid #d4c8d1; border-radius: .65rem; background: #fff; }
.about-approach h3, .strategy-work h3 { color: #211a2e; font-size: 1.35rem; line-height: 1.25; }
.about-services__list { margin-top: 2.5rem; border-top: 1px solid #766b91; }
.about-services__list a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem .5rem; border-bottom: 1px solid #766b91; color: #fff; text-decoration: none; }
.about-services__list a:hover { color: #a8f0ed; background: rgba(255,255,255,.05); }
.about-services__list strong, .about-services__list small { display: block; }
.about-services__list small { margin-top: .3rem; color: #e5dfea; font-size: .95rem; }
.about-services__compare { display: inline-block; margin-top: 2rem; color: #a8f0ed; text-decoration: underline; text-underline-offset: .25em; }
.about-next__inner, .strategy-next__inner, .Home .home-invitation__inner { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.about-next__inner > div, .strategy-next__inner > div, .Home .home-invitation__inner > div { max-width: 42rem; }
.strategy-example__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); }
/* Give the service introduction a clear boundary and a single editorial layout. */
.strategy-intro { padding: clamp(3.5rem, 6vw, 5.5rem) 0; background: #e9ddec; }
.strategy-intro > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); column-gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.strategy-intro > .container > .strategy-eyebrow { grid-column: 1; align-self: end; }
.strategy-intro > .container > h2 { grid-column: 1; margin-top: 0; margin-bottom: 0; }
.strategy-intro > .container > p:not(.strategy-eyebrow) { grid-column: 2; grid-row: 1 / span 2; max-width: 38rem; margin: 0; font-size: 1.1rem; }
.strategy-work + .service-detail { background: #fff; }
.strategy-next__inner > div:last-child, .Home .home-invitation__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.strategy-next__expect, .Home .home-invitation__actions a:not(:first-child) { color: #54246c; text-decoration: underline; text-underline-offset: .2em; }
#service-details { scroll-margin-top: 6rem; }
.about-intro a:focus-visible, .about-approach a:focus-visible, .about-services a:focus-visible, .about-next a:focus-visible, .strategy-hero a:focus-visible, .strategy-intro a:focus-visible, .strategy-work a:focus-visible, .strategy-example a:focus-visible, .strategy-next a:focus-visible, .Home .home-invitation a:focus-visible { outline: 3px solid #b872bf; outline-offset: 4px; }
@media (max-width: 767px) {
 .about-intro__layout, .strategy-hero__layout, .about-approach__grid, .strategy-work__grid, .strategy-example__inner { grid-template-columns: 1fr; }
 .strategy-intro > .container { grid-template-columns: 1fr; gap: 0; }
 .strategy-intro > .container > p:not(.strategy-eyebrow) { grid-column: 1; grid-row: auto; margin-top: 1.25rem; }
 .about-intro__layout, .strategy-hero__layout { gap: 2.5rem; }
 .about-intro h1, .strategy-hero h1 { font-size: clamp(2.65rem, 10vw, 4rem); }
 .about-next__inner, .strategy-next__inner, .Home .home-invitation__inner { align-items: flex-start; flex-direction: column; }
}
/* The services band remains dark in both themes. */
.service-detail { padding: clamp(4rem, 7vw, 7rem) 0; background: #f5f1ea; color: #211a2e; }
.service-detail--alternate { background: #e9ddec; }
.service-detail__layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.service-detail .strategy-eyebrow { color: #634873 !important; }
.service-detail h2 { margin: 0 0 1.25rem; color: #211a2e; font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.1; letter-spacing: -.035em; }
.service-detail p { color: #504658; line-height: 1.7; }
.service-detail__grid { display: grid; gap: 1rem; }
.service-detail__item { padding: 1.5rem; border: 1px solid #d4c8d1; border-radius: .65rem; background: #fff; }
.service-detail__item h3 { margin: 0 0 .5rem; color: #211a2e; font-size: 1.35rem; line-height: 1.25; }
.service-detail__item p:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .service-detail__layout { grid-template-columns: 1fr; } }
[data-theme="light"] .about-services > .container > h2 { color: #fff; }
[data-theme="light"] .about-services > .container > .about-eyebrow { color: #80e8e9 !important; }
[data-theme="light"] .about-services__intro { color: #e5dfea; }
[data-theme="light"] .about-services__list { border-color: #766b91; }
[data-theme="light"] .about-services__list a { color: #fff; border-color: #766b91; }
[data-theme="light"] .about-services__list small { color: #e5dfea; }
[data-theme="light"] .about-services__list a:hover { color: #a8f0ed; background: rgba(255,255,255,.05); }