/* Concrete offers and project workflows, in the existing pearl/navy system. */
.sales-hero { padding-block: 160px 88px; background: var(--paper); }
.sales-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.sales-hero h1 { font-size: clamp(44px, 5.8vw, 80px); font-weight: 600; letter-spacing: -.04em; line-height: 1.04; }
.sales-hero .word-operation { color: #4285F4; }
.sales-hero .word-engineers { color: #B84A00; }
.sales-hero-copy > p { color: var(--muted); font-size: 20px; line-height: 1.6; max-width: 48ch; margin-block: 28px 32px; }
.sales-hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.delivery-example { padding: 36px; background: var(--surface); border-radius: 6px; }
.delivery-example h2 { font-size: clamp(27px, 2.4vw, 34px); letter-spacing: -.03em; line-height: 1.15; }
.delivery-example > p { color: var(--muted); margin-top: 16px; font-size: 16px; }
.delivery-flow { padding: 0; margin-block: 28px; list-style: none; counter-reset: delivery; }
.delivery-flow li { counter-increment: delivery; position: relative; padding: 16px 0 16px 38px; border-top: 1px solid var(--line); }
.delivery-flow li::before { content: counter(delivery); position: absolute; left: 0; top: 17px; color: var(--accent); font-size: 14px; font-weight: 600; }
.delivery-flow strong { display: block; font-size: 17px; font-weight: 600; }
.delivery-flow span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.application-group .project-story:first-child { margin-top: 0; }
@media (max-width: 900px) {
 .sales-hero { padding-block: 130px 64px; }
 .sales-hero-grid { grid-template-columns: 1fr; gap: 36px; }
 .sales-hero-copy > p { max-width: 60ch; }
}
@media (max-width: 600px) {
 .sales-hero { padding-block: 112px 48px; }
 .sales-hero h1 { font-size: clamp(40px, 10vw, 58px); }
 .sales-hero-copy > p { font-size: 17px; margin-block: 24px; }
 .delivery-example { padding: 24px; }
 .sales-hero .hero-actions { gap: 20px; }
}
/* Media-ready slots: concise creative briefs stay visible until supplied assets arrive. */
.section-eyebrow,
.sales-hero-copy > .hero-eyebrow {
  display: block;
  margin: 0 0 22px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.sales-hero { padding-block: 142px 90px; }
.sales-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); }
.sales-hero-copy > p:not(.hero-eyebrow) { max-width: 45ch; }
@media (min-width: 901px) {
  .sales-hero {
    display: flex;
    align-items: center;
    min-height: calc(100svh - 9rem);
  }
  .sales-hero-grid { width: 100%; }
}
.media-placeholder {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-width: 0;
  min-height: 270px;
  padding: clamp(22px, 3vw, 38px);
  overflow: hidden;
  border: 1px dashed #6B89A9;
  border-radius: 6px;
  color: #F7F8FC;
  background: radial-gradient(circle at 85% 18%, #315C83 0, transparent 39%), linear-gradient(140deg, #182B43 0%, #102037 56%, #0D1A2E 100%);
}
.media-placeholder::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 60%;
  aspect-ratio: 1;
  right: -10%;
  bottom: -40%;
  border: 1px solid rgba(196, 223, 245, .26);
  border-radius: 50%;
  box-shadow: 0 0 0 60px rgba(196, 223, 245, .035), 0 0 0 120px rgba(196, 223, 245, .025);
}
.media-placeholder-type,
.media-placeholder-file {
  position: relative;
  z-index: 1;
  width: fit-content;
  color: #C4D7E9;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.media-placeholder-type { padding: 7px 10px; border: 1px solid rgba(217, 233, 248, .42); border-radius: 6px; }
.media-placeholder-copy { position: relative; z-index: 1; max-width: 46ch; }
.media-placeholder-copy strong { display: block; font-size: clamp(23px, 2.5vw, 34px); font-weight: 600; line-height: 1.12; letter-spacing: -.035em; }
.media-placeholder-copy p { margin-top: 12px; color: #DCE8F4; font-size: 15px; line-height: 1.5; }
.sales-hero-media { aspect-ratio: 4 / 3; min-height: 420px; }
.sales-hero-media .media-placeholder-copy strong { font-size: clamp(30px, 3.5vw, 48px); }
.delivery-section { padding-block: 96px; background: var(--surface); }
.delivery-section-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.delivery-example { background: transparent; padding: 0; }
.delivery-example > .section-eyebrow { margin: 0 0 18px; color: var(--accent); font-size: 12px; }
.delivery-example h2 { font-size: clamp(34px, 3.7vw, 52px); }
.delivery-visual { margin: 0; aspect-ratio: 4 / 3; }
.project-highlights { gap: 18px; }
.project-highlights article { overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.project-highlights .media-placeholder--card { aspect-ratio: 16 / 10; min-height: 240px; border: 0; border-radius: 0; padding: 20px; gap: 12px; }
.media-placeholder--card .media-placeholder-copy strong { font-size: 22px; }
.media-placeholder--card .media-placeholder-copy p { font-size: 12px; line-height: 1.45; }
.media-placeholder--card .media-placeholder-file { font-size: 10px; }
.project-highlights .industry-card video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: contain; background: var(--midnight); pointer-events: none; }
.project-highlights article.card-blow { transform-origin: center; animation: card-blow 820ms var(--ease-out) both; animation-delay: var(--blow-delay, 0ms); }
@keyframes card-blow {
  0% { opacity: 0; transform: scale(.62); }
  68% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
.project-highlight-copy { padding: 24px; }
.project-highlights p { min-height: 5em; }
.sector-hero-media.media-placeholder { aspect-ratio: 4 / 3; margin: 0; }
.sector-hero .section-eyebrow { margin-bottom: 18px; font-size: 12px; line-height: 1.2; color: var(--accent); }
.sector-link { grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) auto; }
.sector-link-media { aspect-ratio: 16 / 10; min-height: 0; padding: 18px; gap: 8px; border-radius: 4px; }
.sector-link-media .media-placeholder-type { font-size: 9px; }
.sector-link-media strong { align-self: start; font-size: 17px; line-height: 1.1; letter-spacing: -.02em; }
.sector-link-media small { align-self: start; color: #C4D7E9; font-size: 10px; }
.sector-link-media::before { bottom: -80%; }
@media (max-width: 1100px) {
  .sales-hero-media { min-height: 360px; }
  .project-highlights { gap: 12px; }
  .project-highlight-copy { padding: 18px; }
  .sector-link { grid-template-columns: 180px minmax(0, 1fr) auto; gap: 22px; }
}
@media (max-width: 900px) {
  .sales-hero-grid, .delivery-section-grid { grid-template-columns: 1fr; }
  .sales-hero-media { aspect-ratio: 16 / 10; min-height: 300px; }
  .delivery-visual { aspect-ratio: 16 / 10; }
  .project-highlights p { min-height: 0; }
  .sector-hero-media.media-placeholder { max-width: none; aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
  .sales-hero { padding-block: 114px 56px; }
  .sales-hero-media, .delivery-visual, .sector-hero-media.media-placeholder { aspect-ratio: auto; min-height: 320px; }
  .delivery-section { padding-block: 64px; }
  .media-placeholder-copy p { font-size: 13px; }
  .project-highlights .media-placeholder--card { min-height: 210px; }
  .sector-link { grid-template-columns: 1fr; gap: 18px; }
  .sector-link-media { width: 100%; max-height: 210px; }
}

/* Home: the application routes and a single actionable engagement section. */
.work-routes {
  padding-block: clamp(84px, 9vw, 140px);
  background: var(--pale);
  color: var(--ink);
}
.work-routes-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, .45fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.work-routes h2 {
  max-width: 11ch;
  font-size: clamp(48px, 6vw, 86px);
  line-height: .98;
  letter-spacing: -.04em;
}
.work-routes-heading p { max-width: 28ch; color: var(--muted); font-size: 18px; line-height: 1.5; }
.help-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.help-steps article { min-width: 0; padding: 28px 28px 32px; border: 1px solid #B3C4D8; border-radius: var(--radius); background: var(--paper); }
.help-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); }
.help-icon svg { width: 24px; height: 24px; }
.help-steps h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.help-steps p { max-width: 38ch; margin-top: 12px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.start-section { padding-block: clamp(88px, 9vw, 140px); background: var(--paper); }
.start-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: clamp(50px, 8vw, 128px); }
.start-intro h2 { max-width: 12ch; font-size: clamp(50px, 6vw, 84px); line-height: .98; letter-spacing: -.04em; }
.start-intro > div:first-child > p { max-width: 56ch; margin-top: 34px; color: var(--muted); font-size: 19px; line-height: 1.58; }
.start-call { align-self: end; padding-block: 26px; border-block: 1px solid var(--line); }
.start-call strong { display: block; font-size: 23px; line-height: 1.2; letter-spacing: -.025em; }
.start-call p { max-width: 39ch; margin-top: 18px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.start-call p#why { color: var(--ink); font-weight: 600; scroll-margin-top: 110px; }
.start-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(70px, 9vw, 130px); border-block: 1px solid var(--line); }
.start-path > div { min-width: 0; padding: 27px 36px 30px 0; }
.start-path > div + div { padding-left: 36px; border-left: 1px solid var(--line); }
.start-path span { display: block; margin-bottom: 22px; color: var(--accent); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.start-path strong { display: block; font-size: clamp(23px, 2.2vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; }
.start-path p { max-width: 27ch; margin-top: 12px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.start-actions { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; padding-top: 48px; scroll-margin-top: 110px; }
@media (max-width: 900px) {
  .work-routes-heading, .start-intro { grid-template-columns: 1fr; gap: 28px; }
  .work-routes-heading p { max-width: 50ch; }
  .help-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-call { align-self: auto; max-width: 650px; }
}
@media (max-width: 600px) {
  .work-routes { padding-block: 72px; }
  .work-routes h2, .start-intro h2 { font-size: clamp(42px, 12vw, 60px); }
  .work-routes-heading { margin-bottom: 36px; }
  .work-routes-heading p, .start-intro > div:first-child > p { font-size: 17px; }
  .help-steps { grid-template-columns: 1fr; }
  .help-steps p { max-width: 50ch; }
  .start-section { padding-block: 80px; }
  .start-intro > div:first-child > p { margin-top: 24px; }
  .start-path { grid-template-columns: 1fr; margin-top: 56px; }
  .start-path > div, .start-path > div + div { padding: 23px 0; border-left: 0; }
  .start-path > div + div { border-top: 1px solid var(--line); }
  .start-path span { margin-bottom: 9px; }
  .start-path p { max-width: 50ch; }
  .start-actions { display: grid; gap: 12px; padding-top: 34px; }
  .start-actions .text-link { justify-self: center; }
}

/* Native scrolling keeps touch and trackpad momentum; cards retain the desktop size. */
.selected-projects { container-type: inline-size; }
.project-carousel-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.project-carousel-controls { display: flex; align-items: center; gap: 10px; }
.project-carousel-controls[hidden] { display: none; }
.project-position { min-width: 4ch; margin-right: 8px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.project-carousel-controls button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font: inherit; font-size: 22px; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 180ms ease; }
.project-carousel-controls button:disabled { opacity: .35; cursor: default; }
.project-highlights { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(calc((var(--shell) - 36px) / 3), 84cqw); gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding-block: 4px 18px; }
.project-highlights article { min-width: 0; scroll-snap-align: start; }
.project-highlights:focus-visible { outline-offset: 6px; }
.project-highlight-copy .text-link { transition: transform 180ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .project-carousel-controls button:not(:disabled):hover { background: var(--pale); }
  .project-carousel-controls button:not(:disabled):active { transform: scale(.96); }
  .project-highlight-copy .text-link:hover { transform: translateX(4px); }
}
@media (max-width: 600px) {
  .project-carousel-heading { flex-wrap: wrap; gap: 18px; }
  .project-highlights { margin-top: 24px; gap: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .sales-hero-copy { animation: home-arrive 600ms var(--ease-out) both; }
  .sales-hero-media { animation: home-arrive 600ms 80ms var(--ease-out) both; }
  .motion-enter { animation: home-arrive 600ms var(--ease-out) both; }
  .start-path > .motion-enter:nth-child(2) { animation-delay: 60ms; }
  .start-path > .motion-enter:nth-child(3) { animation-delay: 120ms; }
}
@keyframes home-arrive {
  from { opacity: .35; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .project-carousel-controls button, .project-highlight-copy .text-link, main .enter, .project-highlights article.card-blow { transition: none; animation: none; }
  .project-carousel-controls button:not(:disabled):active, .project-highlight-copy .text-link:hover { transform: none; }
}
.word-stuck { color: #C5221F; }
.delivery-cta { margin-top: 8px; }
.carousel-hint { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.selected-projects { position: relative; }
.selected-projects::after { content: ""; position: absolute; right: 0; top: 88px; bottom: 8px; width: 56px; background: linear-gradient(to right, transparent, var(--paper)); pointer-events: none; }
.industry-card { display: block; color: inherit; text-decoration: none; }
.industry-card .text-link { display: inline-block; color: var(--accent); font-weight: 600; }
.industry-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .delivery-flow.is-running li { animation: step-rise 700ms var(--ease-out) both; }
  .delivery-flow.is-running li:nth-child(2) { animation-delay: 180ms; }
  .delivery-flow.is-running li:nth-child(3) { animation-delay: 360ms; }
  .delivery-flow li:hover { background: var(--accent-soft); }
}
@keyframes step-rise {
  from { opacity: .4; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .selected-projects::after { width: 36px; }
  .carousel-hint { font-size: 14px; }
}