/* Dedicated content pages share the established type and imagery system. */
.content-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: center; }
.content-feature > div { min-width: 0; }
.content-feature h2 { font-size: 36px; margin-bottom: 24px; }
.content-feature .content-lead,.content-lead { font-size: 19px; line-height: 1.85; color: #415e75; }
.content-feature figure { margin: 0; }
.content-feature img { width: 100%; height: auto; aspect-ratio: 1.3; object-fit: cover; border-radius: 24px; }
.content-feature figcaption { color: #61798e; font-size: 10px; text-align: right; margin-top: 10px; }
.content-feature .button { margin-top: 30px; }
.development-stages { list-style: none; counter-reset: development; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 60px 0 0; padding: 0; }
.development-stages li { counter-increment: development; padding: 30px; border: 1px solid #dce6ee; border-radius: 20px; background: #f2f7fa; color: #4d667c; font-size: 15px; line-height: 1.8; }
.development-stages li:before { content: counter(development, decimal-leading-zero); display: block; color: #0868cc; font-family: var(--font-display); font-size: 13px; margin-bottom: 28px; }
.development-stages strong { display: block; font-family: var(--font-display); font-size: 23px; font-weight: 600; line-height: 1.35; color: #123957; margin-bottom: 15px; }
.product-copy { max-width: 820px; margin: 0 auto 60px; text-align: center; }

/* The copy starts at a readable mid tone and resolves to full ink as the reader
   scrolls past it. Both tones clear 4.5:1 on the page background, so a word is
   legible before it lights. app.js adds .is-active, so no JavaScript means full ink. */
.scroll-reveal.is-active span { color: #5e7488; transition: color .5s cubic-bezier(.22,1,.36,1); }
.scroll-reveal.is-active span.is-lit { color: #10284b; }
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal.is-active span { transition: none; }
}
.product-copy > p + p { margin-top: 22px; font-size: 17px; line-height: 1.9; color: #4d667c; }
.product-copy .button { margin-top: 30px; }
.approved-audiences > div { display: block; }
.approved-audiences p { font-size: 16px; line-height: 1.8; }
.approved-audiences strong { color: #123957; font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.team-priority { max-width: 870px; padding: 30px 34px; border: 1px solid #cfe3ec; border-radius: 18px; background: #f3f9fb; margin-bottom: 50px; }
.team-priority p { font-family: var(--font-display); color: #153955; font-size: 30px; line-height: 1.55; }
.team-disciplines { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 18px; }
.team-disciplines article { background: #edf4f8; border: 1px solid #dce8ef; padding: 28px 24px; border-radius: 18px; }
.team-disciplines svg { width: 36px; height: 36px; stroke-width: 1.8; color: #0868cc; margin-bottom: 30px; }
.team-disciplines h2 { font-size: 21px; line-height: 1.4; }
.page-our-approach .priority-strip { margin-top: 55px; }
.development-link { margin-top: 44px; padding-top: 28px; border-top: 1px solid #dce5ee; }
@media(max-width:1100px) {
 .content-feature { gap: 35px; }
 .team-disciplines { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .development-stages { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:750px) {
 .content-feature { grid-template-columns: 1fr; gap: 30px; }
 .content-feature img { aspect-ratio: 1.6; }
 .content-feature .content-lead,.content-lead { font-size: 17px; }
 .product-copy > p + p { font-size: 16px; }
 .team-disciplines { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .team-priority p { font-size: 25px; }
}
@media(max-width:560px) {
 .development-stages { grid-template-columns: 1fr; margin-top: 38px; gap: 16px; }
 .development-stages li { padding: 26px; }
 .team-priority { padding-left: 22px; }
 .team-disciplines article { padding: 24px 18px; }
 .team-disciplines h2 { font-size: 18px; }
 .approved-audiences strong { font-size: 19px; }
 .approved-audiences p { font-size: 15px; }
}

/* Lists lift into place once, in order. The hidden start state applies only after
   app.js arms the list, so the markup is always visible without JavaScript. Kept to
   genuine lists so it does not become one entrance repeated on every section. */
.stagger.is-armed > * {
  opacity: 0;
  translate: 0 22px;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), translate .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(min(var(--i, 0), 6) * 90ms);
}
/* Rows read left to right, so they arrive from the side instead of rising. */
.stagger.is-armed[data-stagger="slide"] > * { translate: -28px 0; }
.stagger.is-armed.is-in > * { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .stagger.is-armed > * { opacity: 1; translate: none; transition: none; }
}

/* Page intros drift two rings at different rates while the banner scrolls away,
   giving inner pages the same depth as the homepage hero. Only the rings move;
   the heading and lead stay put. app.js sets --py; without it the rings rest. */
.page-intro .wrap { position: relative; z-index: 1; }
.page-intro:after { translate: 0 var(--py, 0px); }
.page-intro:before {
  content: ''; position: absolute; pointer-events: none;
  width: 230px; height: 230px; right: 14%; top: -96px;
  border: 1px solid #77e7f324; border-radius: 50%;
  translate: 0 calc(var(--py, 0px) * -.6);
}
@media (max-width: 560px) {
  .page-intro:before { width: 150px; height: 150px; right: -40px; top: -60px; }
}

/* Feature photographs drift inside their frame like the rest of the site's imagery. */
.content-feature figure { overflow: hidden; border-radius: 24px; }
.content-feature img { transform: scale(1.08); translate: 0 var(--py, 0px); }
/* Our Approach: an editorial opening and a photographic companion to the priorities. */
.page-our-approach { background: #fff; }
.site-our-approach .site-header .brand { background: #fff; }
.site-our-approach .site-header .brand:before { opacity: 1; }
.approach-opening { padding-top: 50px; }
.approach-breadcrumb { display: flex; gap: 12px; color: #586d7c; font-size: 12px; }
.approach-breadcrumb a:hover { color: #0868cc; }
.approach-heading { display: grid; grid-template-columns: 1.65fr 1fr; gap: 60px; align-items: end; padding: 36px 0 54px; }
.approach-heading h1 { font-size: clamp(60px, 7.7vw, 116px); line-height: 1.02; font-weight: 500; color: #123652; }
.approach-heading p { font-size: clamp(20px, 2vw, 28px); line-height: 1.5; color: #35566b; }
.approach-panorama { position: relative; height: 53svh; min-height: 340px; max-height: 700px; margin: 0 24px; overflow: hidden; border-radius: 12px; }
.approach-panorama > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transform: scale(1.08); translate: 0 var(--py, 0px); }
.approach-explore { position: absolute; bottom: 30px; left: 36px; display: inline-flex; align-items: center; gap: 40px; border-radius: 999px; padding: 16px 22px; background: #fff; color: #123652; font-size: 14px; }
.approach-explore span { font-size: 22px; line-height: 1; }
.approach-explore:hover { background: #fff; }
.approach-principles { padding: 110px 0; scroll-margin-top: 130px; }
.approach-principles-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 7vw, 110px); align-items: start; }
.approach-photo-panel { position: sticky; top: 135px; height: min(70svh, 740px); min-height: 420px; border-radius: 12px; overflow: hidden; background: #14394b; }
.approach-photo-stack { position: absolute; inset: 0; }
.approach-photo { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; }
.approach-photo.is-current { opacity: 1; }
.approach-photo-stack:after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(4, 26, 38, .9)); }
.approach-photo-panel h2 { position: absolute; bottom: 38px; left: 38px; right: 25px; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.15; color: #fff; font-weight: 500; }
.approach-principles-copy > p { font-size: 17px; line-height: 1.85; color: #405e70; }
.approach-principles-copy > .approach-statement { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.25; color: #123652; margin-bottom: 30px; }
.approach-principles-copy > .approach-list-intro { margin-top: 50px; font-size: 14px; }
.approach-priority-list { list-style: none; padding: 0; margin: 18px 0 40px; }
.approach-priority-list li { display: grid; grid-template-columns: 20px 1fr; gap: 18px; align-items: center; min-height: 155px; padding: 30px 0; border-top: 1px solid #ccd5d6; }
.approach-priority-list li:last-child { border-bottom: 1px solid #ccd5d6; }
.approach-priority-list h3 { font-size: clamp(25px, 2.5vw, 36px); line-height: 1.22; font-weight: 500; color: #35566b; transition: color .3s ease; }
.approach-priority-mark { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #7993a1; transition: background .3s ease; }
.approach-priority-list .is-current h3 { color: #0868cc; }
.approach-priority-list .is-current .approach-priority-mark { background: #0868cc; border-color: #0868cc; }
.approach-principles-copy > .button { gap: 25px; }
.site-our-approach .site-footer { background: #fff; }
@media (max-width: 850px) {
 .approach-opening { padding-top: 32px; }
 .approach-heading { grid-template-columns: 1fr; gap: 25px; padding: 30px 0 38px; }
 .approach-heading h1 { font-size: clamp(50px, 10vw, 80px); }
 .approach-heading p { font-size: 21px; }
 .approach-panorama { margin: 0 16px; height: 48svh; min-height: 300px; border-radius: 12px; }
 .approach-explore { left: 20px; bottom: 20px; }
 .approach-principles { padding: 65px 0; }
 .approach-principles-layout { grid-template-columns: 1fr; gap: 36px; }
 .approach-photo-panel { position: relative; top: auto; height: 420px; min-height: 0; border-radius: 12px; }
 .approach-photo-panel h2 { bottom: 28px; left: 28px; }
 .approach-principles-copy > .approach-statement { font-size: 34px; }
 .approach-priority-list li { min-height: 115px; }
 .approach-priority-list h3 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
 .approach-photo, .approach-priority-list h3, .approach-priority-mark { transition: none; }
}
@media print {
 .approach-photo-panel { position: relative; top: auto; }
 .approach-priority-list li { break-inside: avoid; }
}
/* What We Do: a fixed-reading introduction beside the scrolling service list. */
main.page-services { padding-top: 0; }
.site-services .site-header .brand { background: #fff; }
.site-services .site-header .brand:before { opacity: 1; }
.services-page-surface { position: relative; isolation: isolate; background: #081e2a; }
.services-story { position: relative; }
.site-services .site-footer { background: transparent; }
.site-services .footer-shell {
 background: #051722; color: #fff;
 border: 1px solid rgba(211, 234, 245, .2);
}
.site-services .footer-identity .brand {
 background: #fff; border-radius: 10px; overflow: hidden;
 box-shadow: 0 0 0 8px #fff;
}
.site-services .footer-identity .brand img { mix-blend-mode: normal; }
.site-services .footer-identity h2 span,
.site-services .footer-link-group h3 { color: #b8edff; }
.site-services .footer-identity > p,
.site-services .footer-link-group a,
.site-services .footer-legal { color: #edf3f6; }
.site-services .footer-link-group a:hover { color: #b8edff; }
.site-services .footer-contact-bar { background: #082f50; }
.site-services .site-footer a:focus-visible { outline-color: #b8edff; }
.services-backdrop {
 position: sticky; top: 0; height: 100vh; height: 100svh;
 margin-bottom: -100vh; margin-bottom: -100svh; z-index: -1;
 overflow: hidden; pointer-events: none;
}
.services-background {
 position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
 opacity: 0; transition: opacity .8s ease;
}
.services-background.is-active { opacity: 1; }
.services-backdrop:after {
 content: ''; position: absolute; inset: 0;
 background: linear-gradient(90deg, rgba(5, 23, 34, .88), rgba(5, 23, 34, .72) 48%, rgba(5, 23, 34, .66));
}
.services-layout {
 display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
 gap: 100px; align-items: start; padding-top: calc(var(--site-header-height) + 74px); padding-bottom: 90px;
}
.services-intro { position: sticky; top: max(140px, 22vh); max-width: 420px; }
.services-breadcrumb { display: flex; gap: 12px; font-size: 12px; color: #d1e0e8; margin-bottom: 36px; }
.services-breadcrumb a:hover { color: #fff; }
.services-intro h1 { color: #fff; font-size: clamp(38px, 3.6vw, 52px); line-height: 1.2; }
.services-intro p { color: #edf3f6; font-size: 18px; line-height: 1.85; margin-top: 30px; }
.services-intro .text-link { color: #b8edff; margin-top: 32px; font-size: 14px; }
.services-timeline { position: relative; list-style: none; padding: 0; margin: 18px 0 0; }
.services-timeline:before {
 content: ''; position: absolute; top: 12px; bottom: 80px; left: 50%; width: 1px;
 background: linear-gradient(#b9d4df, #b9d4df 92%, transparent);
}
.services-timeline li {
 position: relative; display: grid;
 grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
 min-height: 230px; scroll-margin-top: 140px;
}
.service-point {
 grid-column: 2; grid-row: 1; justify-self: center;
 width: 12px; height: 12px; margin-top: 5px; border-radius: 50%;
 background: #a6e5fa; border: 3px solid #163646;
 box-shadow: 0 0 0 1px #91bdd8; box-sizing: content-box;
}
.service-copy { grid-column: 3; grid-row: 1; padding: 0 0 48px 10px; }
.services-timeline li:nth-child(even) .service-copy { grid-column: 1; padding: 0 10px 48px 0; }
.service-copy h2 { color: #b8edff; font-size: 21px; line-height: 1.35; }
.service-copy p { color: #edf3f6; font-size: 13px; line-height: 1.8; margin-top: 14px; }
@media (min-width: 851px) and (max-height: 700px) {
 .services-intro { top: 120px; }
 .services-breadcrumb { margin-bottom: 20px; }
 .services-intro p { margin-top: 20px; font-size: 16px; }
}
@media (max-width: 1100px) {
 .services-layout { gap: 48px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
 .services-timeline li { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); }
 .service-copy h2 { font-size: 19px; }
}
@media (max-width: 850px) {
 .services-layout { grid-template-columns: 1fr; gap: 58px; padding-top: calc(var(--site-header-height) + 38px); padding-bottom: 60px; }
 .services-background { object-position: 65% center; }
 .services-intro { position: static; max-width: 560px; }
 .services-breadcrumb { margin-bottom: 24px; }
 .services-timeline { max-width: 620px; margin: 0; }
 .services-timeline:before { left: 10px; bottom: 100px; }
 .services-timeline li { grid-template-columns: 22px minmax(0, 1fr); gap: 22px; min-height: 0; }
 .service-point { grid-column: 1; }
 .services-timeline li .service-copy,
 .services-timeline li:nth-child(even) .service-copy { grid-column: 2; padding: 0 0 44px; }
 .services-timeline li:last-child .service-copy { padding-bottom: 0; }
 .service-copy h2 { font-size: 21px; }
 .service-copy p { font-size: 14px; max-width: 430px; }
}
@media (prefers-reduced-motion: reduce) {
 .services-background { transition: none; }
}
@media print {
 .services-backdrop { display: none; }
 .services-page-surface { background: white; }
 .site-services .footer-shell { background: #edf3f8; color: #102c43; }
 .site-services .footer-identity h2 span, .site-services .footer-identity > p,
 .site-services .footer-link-group h3, .site-services .footer-link-group a,
 .site-services .footer-legal { color: #102c43; }
 .services-intro { position: static; }
 .services-intro h1, .services-intro p, .services-intro .text-link,
 .services-breadcrumb, .service-copy h2, .service-copy p { color: #102c43; }
}