/* ==========================================================================
   Static homepage hero + services grid.
   Loaded AFTER index.redesign.css so it can override the old cockpit rules.

   Replaces the scroll-hijacked "blank canvas builds into a dashboard"
   opener. The page now scrolls natively from the first frame: the hero is
   one full-viewport panel (reusing .app-shell's atmosphere and absolute
   header), and the services sit immediately beneath it.

   Colours come from the tokens already defined in index.redesign.css, so
   both the dark default and the light theme follow automatically.
   ========================================================================== */

/* The old hero locked the document (body{overflow:hidden}) and released it
   from JS by adding .is-released. index.html now carries that class
   statically; these rules restate the unlock so the page scrolls even if the
   class is ever dropped. */
html, body { height: auto; }
body { overflow: visible; }
/* Belt-and-braces against a horizontal scrollbar. `clip` rather than
   `hidden` on purpose: `hidden` would make the root a scroll container and
   break position:sticky further down the page (.pcr-split-aside), whereas
   `clip` does not. */
html { overflow-x: clip; }

/* .app-shell keeps its 100svh height, corner-glow atmosphere and absolutely
   positioned header — exactly what a full-bleed hero panel needs. */
.app-shell { display: block; }

/* ---- Layout ------------------------------------------------------------ */
.hero {
  position: relative;
  height: 100%;
  max-width: 1720px;
  margin: 0 auto;
  padding: 76px clamp(22px, 4.5vw, 74px) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
}

.hero__copy { position: relative; z-index: 3; max-width: 40rem; }

.hero__eyebrow {
  margin: 0 0 clamp(14px, 2.4vh, 26px);
  color: var(--mint);
  font: 500 .6rem/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero__eyebrow span { opacity: .5; margin: 0 .5em; }

.hero h1 {
  margin: 0;
  color: var(--ink);
  font: 600 clamp(2.1rem, 4.4vw, 3.9rem)/1.06 var(--sans);
  letter-spacing: -.02em;
}
/* The emphasised half of the headline carries the brand gradient's leading
   colours (green -> cyan), matching the logo mark beside it. */
.hero h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--mint), var(--tdc-cyan) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  margin: clamp(16px, 2.6vh, 26px) 0 0;
  max-width: 34rem;
  color: #9db1bb;
  font-size: clamp(.86rem, 1.05vw, .98rem);
  line-height: 1.62;
}

/* ---- Actions ----------------------------------------------------------- */
.hero__actions {
  margin: clamp(22px, 3.4vh, 38px) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 13px 22px;
  border-radius: 99px;
  border: 1px solid transparent;
  background: var(--ink);
  color: var(--navy);
  font: 600 .69rem/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform .22s cubic-bezier(.22,.72,.18,1), box-shadow .22s, background .22s, border-color .22s;
}
.hero__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(0,0,0,.6); }
.hero__cta.-ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(157,177,187,.34);
}
.hero__cta.-ghost:hover { border-color: rgba(var(--tdc-green-rgb), .55); background: rgba(var(--tdc-green-rgb), .06); }

/* ---- Proof strip ------------------------------------------------------- */
.hero__proof {
  margin: clamp(26px, 4vh, 44px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  color: #8ca0aa;
  font: 500 .62rem/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero__proof li { display: flex; align-items: center; gap: 9px; }
.hero__proof li::before {
  content: "";
  width: 5px; height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
}

/* ---- Animated logo mark ------------------------------------------------ */
/* The brand mark, enlarged and bled off the right edge the way BBD and
   Entelect treat their hero graphics. Three concentric arcs rotate
   independently at slow, unequal speeds so the figure never reads as a
   rigid spinning wheel. */
.hero__mark {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: min(43rem, 46vw);
  aspect-ratio: 1;
  pointer-events: none;
}
.hero__mark svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Nothing rotates: independent per-arc rotation pulled the three D forms out
   of register and destroyed the brand mark. Each form draws itself on once,
   then the set breathes outward in sequence — concentric, about a shared
   centre, so the figure is always exactly the logo.

   Draw-on animates stroke-dashoffset on the path (normalised by
   pathLength="100"); the breath animates a scale on the parent <g>, so the
   two never fight over the same property. */
.hero-mark__ring {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: heroMarkBreathe 7s cubic-bezier(.45,0,.55,1) infinite;
}
.hero-mark__ring.-outer { animation-delay: 0s; }
.hero-mark__ring.-mid   { animation-delay: .55s; }
.hero-mark__ring.-inner { animation-delay: 1.1s; }

.hero-mark__ring path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: heroMarkDraw 1.4s cubic-bezier(.22,.72,.18,1) forwards;
}
.hero-mark__ring.-outer path { stroke-width: 9;  animation-delay: .08s; }
.hero-mark__ring.-mid   path { stroke-width: 10; animation-delay: .26s; }
.hero-mark__ring.-inner path { stroke-width: 11; animation-delay: .44s; }

.hero-mark__dot {
  fill: var(--tdc-purple, #3f3f74);
  opacity: 0;
  animation: heroMarkIn .9s cubic-bezier(.22,.72,.18,1) 1.05s forwards;
}

@keyframes heroMarkDraw { to { stroke-dashoffset: 0; } }
@keyframes heroMarkBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.016); }
}
@keyframes heroMarkIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- Scroll hint ------------------------------------------------------- */
.hero__scroll {
  position: absolute;
  z-index: 3;
  left: clamp(22px, 4.5vw, 74px);
  bottom: clamp(20px, 4vh, 40px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #7d919b;
  font: 500 .78rem/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero__scroll i {
  display: block;
  width: 2px; height: 44px;
  background: linear-gradient(180deg, rgba(var(--tdc-green-rgb), .8), transparent);
}
.hero__scroll:hover { color: var(--ink); }

/* ---- Services: static grid instead of a horizontal carousel ------------ */
/* All eight services visible at once — the old .pcr-rail carousel showed
   two or three and hid the rest behind arrow buttons. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 18px;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .app-shell { height: auto; min-height: 0; }
  .hero {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-height: 100svh;
    padding-top: clamp(100px, 15vh, 146px);
    padding-bottom: clamp(56px, 10vh, 96px);
    align-content: center;
  }
  .hero__mark { max-width: min(22rem, 62vw); justify-self: start; opacity: .9; }
  .hero__scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark__ring, .hero-mark__ring path, .hero-mark__dot {
    animation: none !important;
    opacity: 1;
    stroke-dashoffset: 0 !important;
  }
}

/* ==========================================================================
   Alternating navy / white section bands
   Replaces the light/dark theme toggle: one fixed palette, and the page
   alternates between the brand navy and white as it scrolls.

   The sections inside .post-continue-redesign colour themselves from the
   --pcr-* custom properties, so a white band mostly just redefines those.
   The handful of hardcoded darks (card titles, body copy) are overridden
   explicitly below.
   ========================================================================== */
.band { position: relative; }

.band--navy { background: var(--navy); }

.band--light {
  /* Component tokens the sections already read from. */
  --pcr-text: #10222f;
  --pcr-muted: #55707f;
  --pcr-border: rgba(16,34,47,.14);
  --pcr-surface: rgba(16,34,47,.022);
  --line: rgba(16,34,47,.14);
  --ink: #10222f;
  background: #fff;
  color: #10222f;
}
/* The navy bands carry decorative radial glows that read as grey smears on
   white, so they are cleared for light bands. */
.band--light.services-section { background: #fff; }

.band--light h2,
.band--light h3,
.band--light b,
.band--light strong { color: #10222f; }
.band--light p,
.band--light .intro,
.band--light li { color: #4b6272; }
.band--light .eyebrow { color: #0b7a58; }
.band--light .eyebrow i { background: rgba(16,34,47,.2); }

.band--light .service-card,
.band--light .industry-card,
.band--light .insight-card,
.band--light .feedback-card {
  background: rgba(16,34,47,.022);
  border-color: rgba(16,34,47,.12);
}
.band--light .service-card b { color: #10222f; }
.band--light .service-card p { color: #55707f; }
.band--light .service-card a,
.band--light .band-link,
.band--light .industry-card a { color: #0b7a58; }
.band--light .tags li {
  border-color: rgba(16,34,47,.16);
  color: #55707f;
}
.band--light .service-card:hover,
.band--light .service-card:focus-within {
  border-color: rgba(11,122,88,.4);
  background: rgba(11,122,88,.05);
}

/* ---- Shared pieces for the three new bands ----------------------------- */
.industries-section,
.feedback-section,
.insights-section {
  padding: clamp(58px, 9vh, 112px) clamp(22px, 5vw, 56px);
}
.industries-section h2,
.feedback-section h2,
.insights-section h2 {
  margin: 10px 0 0;
  font: 600 clamp(1.6rem, 2.9vw, 2.5rem)/1.12 var(--sans);
  letter-spacing: -.01em;
}
.industries-section h2 em,
.feedback-section h2 em,
.insights-section h2 em { font-style: normal; color: var(--mint); }
.band--light .industries-section h2 em { color: #0b7a58; }

.band-link {
  display: inline-block;
  margin: clamp(26px, 4vh, 40px) 0 0;
  color: var(--mint);
  font: 500 .6rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.band-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- Industries -------------------------------------------------------- */
.industry-grid {
  margin: clamp(28px, 4.5vh, 46px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 18px;
}
.industry-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  border-top: 2px solid rgba(var(--tdc-cyan-rgb), .45);
  background: rgba(255,255,255,.02);
  transition: border-color .25s, background .25s, transform .35s cubic-bezier(.22,.72,.18,1);
}
.industry-card:nth-child(2) { border-top-color: rgba(var(--tdc-green-rgb), .5); }
.industry-card:nth-child(3) { border-top-color: rgba(var(--tdc-purple-rgb), .5); }
.industry-card:hover { transform: translateY(-3px); border-color: rgba(var(--tdc-green-rgb), .4); }
.industry-card b { font: 600 1rem/1.2 var(--sans); }
.industry-card p { margin: 0; flex: 1; font-size: .78rem; line-height: 1.55; }
.industry-card a { font: 500 .58rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--mint); }

/* ---- Feedback ---------------------------------------------------------- */
.feedback-grid {
  margin: clamp(28px, 4.5vh, 46px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 18px;
}
.feedback-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,.02);
}
.feedback-card blockquote { margin: 0; flex: 1; }
.feedback-card blockquote p {
  margin: 0;
  font: 400 .92rem/1.6 var(--body);
  color: var(--ink);
}
.feedback-card figcaption { display: flex; flex-direction: column; gap: 3px; }
.feedback-card figcaption strong { font: 600 .8rem/1.2 var(--sans); }
.feedback-card figcaption span { font-size: .72rem; color: #8ca0aa; }
.band--light .feedback-card figcaption span { color: #55707f; }

/* ---- Insights ---------------------------------------------------------- */
.insights-grid {
  margin: clamp(28px, 4.5vh, 46px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 18px;
}
.insight-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,.02);
  transition: border-color .25s, transform .35s cubic-bezier(.22,.72,.18,1);
}
.insight-card:hover { transform: translateY(-3px); border-color: rgba(var(--tdc-green-rgb), .4); }
.insight-meta {
  margin: 0;
  display: flex;
  gap: 14px;
  font: 500 .56rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mint);
}
.insight-meta time { color: #8ca0aa; }
.band--light .insight-meta time { color: #55707f; }
.insight-card h3 { margin: 0; font: 600 1rem/1.32 var(--sans); }
.insight-card h3 a:hover { color: var(--mint); }
.insight-excerpt { margin: 0; font-size: .78rem; line-height: 1.6; }

/* ---- Light-band accent colours ----------------------------------------
   The mint (#7edcbd) and cyan (#1dc3e0) accents were chosen against navy
   and fail badly on white (1.6:1 and 2.1:1). Custom properties inherit as
   already-substituted values, so each alias has to be restated here —
   redefining only --tdc-green would not reach --mint. */
.band--light {
  --tdc-green: #0b7a58;  --tdc-green-rgb: 11,122,88;
  --tdc-cyan:  #0d7490;  --tdc-cyan-rgb:  13,116,144;
  --mint: #0b7a58;
  --cyan: #0d7490;
  --pcr-green: #0b7a58;  --pcr-green-rgb: 11,122,88;
  --pcr-cyan:  #0d7490;  --pcr-cyan-rgb:  13,116,144;
  --pcr-accent-a: #0b7a58;
  --pcr-accent-b: #0d7490;
}
/* Headline emphasis is a pale slate (#9db1bb) set directly on the element,
   so it needs its own override rather than a token swap. */
.band--light h2 em,
.band--light h3 em { color: #0b7a58; }
.band--light .eyebrow span { color: #0b7a58; }
.band--light .pcr-capability-label { color: #10222f; }
.band--light .insight-card h3 a:hover { color: #0b7a58; }

/* ---- Stable backgrounds -------------------------------------------------
   .pcr-atmosphere is a sticky, full-viewport canvas that post-continue.js
   fades to opacity .85 with mix-blend-mode:screen as you scroll. Against the
   old all-navy page it read as ambient depth; against alternating navy/white
   bands it washes the colour and looks like the background is changing on
   scroll. The chapter boundary sweep does the same on a smaller scale. Both
   are off — the bands are the background story now. */
.post-continue-redesign .pcr-atmosphere { display: none !important; }
[data-chapter].pcr-boundary-lit::after { animation: none !important; }

/* ---- Chapter grouping --------------------------------------------------
   Bands are grouped by chapter rather than alternating one-by-one:
     hero            navy
     what we do      white   (services, industries)
     how we work     navy    (capability, four steps, tech, constants)
     proof           white   (feedback, insights)
     closing         navy
   Sections inside one chapter share a background, so the seam between them
   must not read as two stacked bands — drop the doubled padding. */
.band--light + .band--light,
.band--navy  + .band--navy { padding-top: clamp(26px, 4vh, 54px); }

/* The closing grid was three columns; its "Recent thinking" column has been
   removed because the new Insights band above it lists the same three posts. */
.closing-section .pcr-closing-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .closing-section .pcr-closing-grid { grid-template-columns: 1fr; }
}

/* ---- Closing CTA: no nested card --------------------------------------
   The CTA was a bordered, drop-shadowed panel with its own two-light
   gradient — a card floating inside the closing band. It now sits directly
   on the band. */
.post-continue-redesign .pcr-closing-cta {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  max-width: 44rem;
  margin-top: clamp(52px, 8vh, 92px);
}

/* Section headings are now single-line and plain, so the <em> emphasis
   pattern they were built around is gone. Keep them tight and readable. */
.post-continue-redesign h2,
.industries-section h2,
.feedback-section h2,
.insights-section h2 {
  max-width: 24ch;
  text-wrap: balance;
}
.post-continue-redesign .pcr-closing-cta h2 { max-width: 18ch; }

/* ==========================================================================
   Calm pass: remove the decorative glow layers
   These all made sense on the old all-navy scroll-jacked page. On a plain
   scrolling page with navy/white bands they read as smears and stray lines
   sweeping across the content.
   ========================================================================== */

/* A full-width cyan bar pinned to the top edge of every [data-chapter]
   section (top:-1px), animated to sweep across as the chapter scrolled in.
   This is the line that appeared to travel over the content. */
[data-chapter]::after { display: none !important; }

/* A 2px gradient line running the ENTIRE page height (7738px) down the left
   edge, tying the old chapters together. */
.post-continue-redesign .connective-line { display: none !important; }

/* The long kicker rule: .eyebrow is display:flex and this was flex:1 1 auto,
   so it stretched to 800-900px and collided with the kicker text whenever
   that text wrapped to a second line. */
.pcr-kicker-rule { display: none !important; }
.eyebrow { flex-wrap: wrap; }
.eyebrow i { flex: none; }

/* Pointer-following radial glows behind the cards and tiles. */
.service-card::before,
.post-continue-redesign .pcr-rhythm-ways li::before,
.post-continue-redesign .pcr-problem-tile::before { display: none !important; }

/* Card 3D mouse-tilt: the transform is driven by inline custom properties
   from JS, so the properties are neutralised rather than the transform. */
.service-card,
.post-continue-redesign .pcr-rhythm-ways li,
.post-continue-redesign .pcr-problem-tile {
  --pcr-tilt-x: 0deg !important;
  --pcr-tilt-y: 0deg !important;
}

/* Corner-glow wash behind the services band. */
.services-section.band--light { background: #fff !important; }

/* The last two large gradient washes: a soft field behind the four-step
   rhythm rows, and the one bleeding across the technology stack rows. */
.post-continue-redesign .pcr-rhythm-rows::before,
.post-continue-redesign .pcr-tech-stack::before { display: none !important; }

/* ---- Customer logo marquee --------------------------------------------
   The full 48-logo customer set on a continuous marquee, sitting under the
   hero the way BBD places its client row.

   The band is white and the logos sit directly on it with no tile: the files
   are a mix of transparent PNGs and JPGs with a baked-in white background,
   and multiply blending drops those white boxes straight into the band, so
   they all read as one row rather than a strip of cards. */
.clients-section {
  padding: clamp(24px, 3.4vh, 40px) 0;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
}
.clients-lead {
  flex: none;
  margin: 0;
  max-width: 8.5rem;
  padding-left: clamp(22px, 5vw, 56px);
  color: #55707f;
  font: 500 .62rem/1.5 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.customer-marquee {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.customer-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3.2vw, 58px);
  width: max-content;
  will-change: transform;
  animation: customerMarquee 64s linear infinite;
}
/* Let people stop it to actually read a logo. */
.customer-marquee:hover .customer-marquee__track,
.customer-marquee:focus-within .customer-marquee__track { animation-play-state: paused; }

@keyframes customerMarquee {
  to { transform: translate3d(calc(-1 * var(--logo-loop-width, 10080px)), 0, 0); }
}

.customer-marquee figure {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(120px, 11vw, 168px);
  height: clamp(58px, 5.4vw, 78px);
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.customer-marquee img {
  /* An explicit cap rather than max-height:100% - inside the grid item the
     percentage resolves against an auto height and the logo overflowed the
     slot by a few pixels. */
  max-width: 100%;
  max-height: clamp(50px, 4.8vw, 70px);
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .customer-marquee__track { animation: none; }
  .customer-marquee { overflow-x: auto; }
}

@media (max-width: 700px) {
  .clients-section { display: block; }
  .clients-lead { margin-bottom: 14px; }
}

/* ==========================================================================
   Calm pass: remove the decorative glow layers
   These all made sense on the old all-navy scroll-jacked page. On a plain
   scrolling page with navy/white bands they read as smears and stray lines
   sweeping across the content.
   ========================================================================== */

/* A full-width cyan bar pinned to the top edge of every [data-chapter]
   section (top:-1px), animated to sweep across as the chapter scrolled in.
   This is the line that appeared to travel over the content. */
[data-chapter]::after { display: none !important; }

/* A 2px gradient line running the ENTIRE page height (7738px) down the left
   edge, tying the old chapters together. */
.post-continue-redesign .connective-line { display: none !important; }

/* The long kicker rule: .eyebrow is display:flex and this was flex:1 1 auto,
   so it stretched to 800-900px and collided with the kicker text whenever
   that text wrapped to a second line. */
.pcr-kicker-rule { display: none !important; }
.eyebrow { flex-wrap: wrap; }
.eyebrow i { flex: none; }

/* Pointer-following radial glows behind the cards and tiles. */
.service-card::before,
.post-continue-redesign .pcr-rhythm-ways li::before,
.post-continue-redesign .pcr-problem-tile::before { display: none !important; }

/* Card 3D mouse-tilt: the transform is driven by inline custom properties
   from JS, so the properties are neutralised rather than the transform. */
.service-card,
.post-continue-redesign .pcr-rhythm-ways li,
.post-continue-redesign .pcr-problem-tile {
  --pcr-tilt-x: 0deg !important;
  --pcr-tilt-y: 0deg !important;
}

/* Corner-glow wash behind the services band. */
.services-section.band--light { background: #fff !important; }

/* The last two large gradient washes: a soft field behind the four-step
   rhythm rows, and the one bleeding across the technology stack rows. */
.post-continue-redesign .pcr-rhythm-rows::before,
.post-continue-redesign .pcr-tech-stack::before { display: none !important; }

/* ==========================================================================
   Calm pass: remove the decorative glow layers
   These all made sense on the old all-navy scroll-jacked page. On a plain
   scrolling page with navy/white bands they read as smears and stray lines
   sweeping across the content.
   ========================================================================== */

/* A full-width cyan bar pinned to the top edge of every [data-chapter]
   section (top:-1px), animated to sweep across as the chapter scrolled in.
   This is the line that appeared to travel over the content. */
[data-chapter]::after { display: none !important; }

/* A 2px gradient line running the ENTIRE page height (7738px) down the left
   edge, tying the old chapters together. */
.post-continue-redesign .connective-line { display: none !important; }

/* The long kicker rule: .eyebrow is display:flex and this was flex:1 1 auto,
   so it stretched to 800-900px and collided with the kicker text whenever
   that text wrapped to a second line. */
.pcr-kicker-rule { display: none !important; }
.eyebrow { flex-wrap: wrap; }
.eyebrow i { flex: none; }

/* Pointer-following radial glows behind the cards and tiles. */
.service-card::before,
.post-continue-redesign .pcr-rhythm-ways li::before,
.post-continue-redesign .pcr-problem-tile::before { display: none !important; }

/* Card 3D mouse-tilt: the transform is driven by inline custom properties
   from JS, so the properties are neutralised rather than the transform. */
.service-card,
.post-continue-redesign .pcr-rhythm-ways li,
.post-continue-redesign .pcr-problem-tile {
  --pcr-tilt-x: 0deg !important;
  --pcr-tilt-y: 0deg !important;
}

/* Corner-glow wash behind the services band. */
.services-section.band--light { background: #fff !important; }

/* The last two large gradient washes: a soft field behind the four-step
   rhythm rows, and the one bleeding across the technology stack rows. */
.post-continue-redesign .pcr-rhythm-rows::before,
.post-continue-redesign .pcr-tech-stack::before { display: none !important; }

/* ---- Flat hero, one subtle step for the client strip -------------------
   .app-shell carried two large corner radial gradients (green at bottom
   left, purple at top right) whose intensity was animated from JS via
   --atmo-green / --atmo-purple. That JS is gone with the old hero, so they
   sat at their fallback strength as a static coloured wash. The hero is now
   flat navy.

   The only tonal move is the client strip: one slightly lighter navy step,
   then straight back to the base navy for the services — the way BBD steps
   its logo row a shade off its black. */
.app-shell { background: var(--navy) !important; }

.clients-section.band--navy {
  background: #0c1d2f;
  border-bottom: 0;
}

/* ==========================================================================
   De-chrome: boxes, pills and accent bars are what make the page read as
   "technical". Everything below strips the container chrome and lets
   typography and whitespace carry the structure instead — the way Entelect
   and BBD present their services.
   ========================================================================== */

/* ---- Card grids -> open typographic blocks ---------------------------- */
.service-card,
.industry-card,
.insight-card,
.feedback-card,
.post-continue-redesign .pcr-problem-tile {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 20px 0 0 !important;
  border-top: 1px solid rgba(255,255,255,.11) !important;
  transform: none !important;
}
.band--light .service-card,
.band--light .industry-card,
.band--light .insight-card,
.band--light .feedback-card,
.band--light .pcr-problem-tile {
  border-top-color: rgba(16,34,47,.15) !important;
}
.service-card:hover,
.service-card:focus-within,
.industry-card:hover,
.insight-card:hover,
.post-continue-redesign .pcr-problem-tile:hover {
  background: none !important;
  transform: none !important;
  border-top-color: rgba(var(--tdc-green-rgb), .75) !important;
}

/* A little more air now that nothing is boxed. */
.services-grid, .industry-grid, .insights-grid, .feedback-grid {
  gap: clamp(26px, 3vw, 44px) clamp(22px, 2.6vw, 40px);
}

/* Names carry the hierarchy instead of a card edge. */
.service-card b,
.industry-card b { font-size: 1.06rem; }

/* ---- Tag pills -> plain inline text ----------------------------------- */
/* Uppercase mono chips in outlined boxes are the single most "technical"
   element on the page. Same words, set as quiet prose. */
.tags,
.post-continue-redesign .pcr-capability-tags,
.post-continue-redesign .pcr-tech-layer__tags {
  display: block !important;
  margin-top: 14px !important;
}
.tags li,
.post-continue-redesign .pcr-capability-tags li,
.post-continue-redesign .pcr-tech-layer__tags li {
  display: inline !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  color: #7d919b !important;
  font: 400 .74rem/1.6 var(--body) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.band--light .tags li,
.band--light .pcr-capability-tags li,
.band--light .pcr-tech-layer__tags li { color: #5c7381 !important; }

.tags li:not(:last-child)::after,
.post-continue-redesign .pcr-capability-tags li:not(:last-child)::after,
.post-continue-redesign .pcr-tech-layer__tags li:not(:last-child)::after {
  content: " · ";
  opacity: .55;
}

/* ---- Logo-only tech rows opt back out of the plain-prose treatment ----- */
/* Cloud foundations, AI and analytics and Application engineering are now
   entirely logos (no words to set as prose), so lay them out as an
   explicit left-to-right row instead of inline text — that's what lets
   them run bigger than the mixed logo+text rows without wrapping onto a
   second line. */
.post-continue-redesign .pcr-tech-layer__tags.-logos {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.post-continue-redesign .pcr-tech-layer__tags.-logos li {
  display: inline-flex !important;
}
.post-continue-redesign .pcr-tech-layer__tags.-logos li:not(:last-child)::after {
  content: none !important;
}

/* ---- Quotes ------------------------------------------------------------ */
.feedback-card { gap: 14px; }
.feedback-card blockquote p { font-size: .98rem; line-height: 1.62; }

/* ---- Hero mark depth ---------------------------------------------------
   The mark was a flat, even-weight vector. Three things give it depth
   without touching the D geometry: a blurred copy of itself behind for
   bloom, a gentle perspective tilt so it is not dead-on, and a slight
   weight/opacity falloff from the inner form outwards. */
.hero__mark svg {
  transform: perspective(1500px) rotateY(-12deg) rotateX(6deg);
  transform-origin: 60% 50%;
}

.hero-mark__bloom {
  fill: none;
  stroke-linecap: round;
  opacity: .42;
}
.hero-mark__bloom path { fill: none; stroke-linecap: round; }
.hero-mark__bloom path:nth-child(1) { stroke-width: 13; }
.hero-mark__bloom path:nth-child(2) { stroke-width: 14; }
.hero-mark__bloom path:nth-child(3) { stroke-width: 15; }

/* Weight falloff: the innermost form reads closest, the outer recedes. */
.hero-mark__ring.-outer path { opacity: .82; }
.hero-mark__ring.-mid   path { opacity: .92; }
.hero-mark__ring.-inner path { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-mark__bloom { opacity: .4; }
}

/* ---- Insights: image cards -------------------------------------------
   Five posts with their real featured images, pulled from the live site.
   The first runs full width with the image beside the copy; the other four
   sit in a row beneath with the image on top. No card chrome — the image is
   the block, so the hairline rule the other grids use is dropped here. */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px) clamp(18px, 2.2vw, 32px);
}
.insights-grid .insight-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 0 !important;
  padding-top: 0 !important;
}
.insights-grid .insight-card.-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding-bottom: clamp(22px, 3vh, 38px);
  border-bottom: 1px solid rgba(16,34,47,.14);
}
.band--navy .insights-grid .insight-card.-featured { border-bottom-color: rgba(255,255,255,.11); }

.insight-card__media {
  display: block;
  overflow: hidden;
  background: rgba(16,34,47,.05);
}
.band--navy .insight-card__media { background: rgba(255,255,255,.04); }
.insight-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22,.72,.18,1);
}
.insight-card:hover .insight-card__media img { transform: scale(1.03); }

.insight-card__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.insights-grid .insight-card h3 { margin: 0; font: 600 1rem/1.34 var(--sans); }
.insights-grid .insight-card.-featured h3 { font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.2; }
.insights-grid .insight-card.-featured .insight-excerpt { font-size: .88rem; }
.insights-grid .insight-meta { margin: 0; }

@media (max-width: 1100px) {
  .insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .insights-grid { grid-template-columns: minmax(0, 1fr); }
  .insights-grid .insight-card.-featured { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Insights: images as secondary thumbnails -------------------------
   Every featured image is a WordPress social-share card with the headline
   and a teal band composited into the PNG, so a large thumbnail shows each
   title twice and the baked-in type competes with the card's own heading.
   The band sits at a different height in every file (y 0-21% up to y 1-79%),
   so there is no crop that avoids it across the set.

   Until clean photography exists, the images run as small, quiet thumbnails
   beside the copy: the duplication stops competing and the card's real
   heading carries the hierarchy. */
.insights-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.6vh, 34px) clamp(28px, 3.4vw, 56px);
}
.insights-grid .insight-card {
  display: grid;
  grid-template-columns: clamp(104px, 11vw, 148px) minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: start;
  padding-bottom: clamp(18px, 2.2vh, 26px);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.band--light .insights-grid .insight-card { border-bottom-color: rgba(16,34,47,.12); }

.insights-grid .insight-card.-featured {
  grid-column: 1 / -1;
  grid-template-columns: clamp(180px, 22vw, 300px) minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  align-items: center;
  padding-bottom: clamp(24px, 3vh, 38px);
}
.insight-card__media { align-self: start; }
.insight-card__media img { aspect-ratio: 16 / 9; }

.insights-grid .insight-card h3 { font-size: .95rem; line-height: 1.34; }
.insights-grid .insight-card.-featured h3 { font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.24; }
.insights-grid .insight-excerpt { font-size: .78rem; }
.insights-grid .insight-card.-featured .insight-excerpt { font-size: .86rem; }

@media (max-width: 820px) {
  .insights-grid { grid-template-columns: minmax(0, 1fr); }
  .insights-grid .insight-card.-featured { grid-template-columns: clamp(104px, 26vw, 160px) minmax(0, 1fr); align-items: start; }
}

/* ---- Closing section --------------------------------------------------
   Office pills were the last surviving chip element on the page; the two
   columns and the CTA also sat in a lot of dead vertical space. */
.pcr-closing-locations { display: block !important; }
.pcr-closing-locations li {
  display: block !important;
  padding: 9px 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 0 !important;
  background: none !important;
}
.band--light .pcr-closing-locations li { border-top-color: rgba(16,34,47,.12) !important; }
.pcr-closing-locations li:first-child { border-top: 0 !important; }
.pcr-closing-locations b { margin-right: 10px; }

.closing-section .pcr-closing-grid {
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(24px, 3vh, 36px);
}
.closing-section .pcr-closing-cta {
  margin-top: clamp(34px, 4.5vh, 58px);
  padding-top: clamp(30px, 4vh, 48px);
  border-top: 1px solid rgba(255,255,255,.09);
}
.band--light .closing-section .pcr-closing-cta { border-top-color: rgba(16,34,47,.12); }

/* ---- Header: always visible -------------------------------------------
   .site-header was position:absolute inside .app-shell, so it scrolled away
   with the hero and the nav was unreachable for the rest of the page. Fixed
   instead, with a solid navy ground so it stays legible over the white
   bands too (the original navy gradient went transparent over white). */
.site-header {
  position: fixed !important;
  background: rgba(6, 17, 30, .94) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
/* Anchor targets (#services etc.) must not land underneath it. */
section[id] { scroll-margin-top: 90px; }

/* ---- No sticky column ---------------------------------------------------
   .pcr-split-aside was position:sticky, which pinned the "How we work"
   left-hand column and made that one section behave differently from every
   other on the page. */
.pcr-split-aside { position: static !important; top: auto !important; }

/* ---- Readable brand colour on white -----------------------------------
   The stylesheet has darker --tdc-*-ink variants intended for a light
   background, but every rule that uses them is scoped to
   [data-theme="light"] — and nothing sets that attribute since the theme
   toggle was removed. So the light bands were rendering brand colours
   picked for navy: "Cloud foundations" and "AI and analytics" came out at
   3.4:1, below AA.

   Row labels are simply dark on light bands: the numbers already
   differentiate them, so the colour was carrying no information. */
.band--light .pcr-tech-layer__head span,
.band--light .pcr-capability-label,
.band--light .pcr-rhythm-row b,
.band--light .pcr-problem-tile b { color: #10222f !important; }

.band--light {
  --tdc-purple: #4a55a8;
  --tdc-purple-text: #434e9e;
  --tdc-cyan-ink: #0d6b84;
  --tdc-purple-ink: #434e9e;
  --tdc-green-ink: #0a6b4d;
}
/* Links/eyebrows keep brand green, one step darker for comfort on white. */
.band--light .service-card a,
.band--light .band-link,
.band--light .industry-card a,
.band--light .eyebrow span,
.band--light .inline-link { color: #0a6b4d !important; }

.clients-lead { color: #4b6272; }

/* ---- Why TDC ------------------------------------------------------------
   Replaces the old "What we deliver" capability matrix, which published
   internal working notes ("These areas came up while mapping the market
   against our own site") and a "Capability being evaluated" list naming
   things TDC cannot yet do. This says why to hire a services business
   instead, using the differentiators from the live site. */
.diff-grid {
  margin: clamp(28px, 4vh, 46px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(24px, 3vw, 42px) clamp(22px, 2.6vw, 40px);
}
.diff-item {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.11);
}
.band--light .diff-item { border-top-color: rgba(16,34,47,.15); }
.diff-item b { font: 600 1.02rem/1.28 var(--sans); color: var(--ink); }
.band--light .diff-item b { color: #10222f; }
.diff-item p { margin: 0; font-size: .82rem; line-height: 1.6; color: #8ca0aa; }
.band--light .diff-item p { color: #4b6272; }

/* ---- Section padding: one scale ---------------------------------------
   .differentiators-section was a new class with no padding rule at all, so
   it rendered with padTop/padBottom/padLeft of 0 and butted straight into
   the bands either side. The sections from index.redesign.css also use a
   74px max side gutter while the ones added here used 56px, so the two sets
   did not line up. Everything is on the same scale now. */
.differentiators-section,
.industries-section,
.feedback-section,
.insights-section {
  padding: clamp(58px, 9vh, 110px) clamp(22px, 4.5vw, 74px);
}

/* ---- Closing section --------------------------------------------------
   Two columns where the right one held only four office names left a large
   void beside the community list. The notes now spread across the width and
   the locations sit under them as one compact row. */
.closing-section .pcr-closing-grid { display: block !important; }
.closing-section .pcr-closing-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}
.closing-section .pcr-closing-notes > * { border-top: 0 !important; padding-top: 0 !important; }
.closing-section .pcr-closing-col + .pcr-closing-col { margin-top: clamp(30px, 4vh, 52px); }

.pcr-closing-locations { display: flex !important; flex-wrap: wrap; gap: 0 !important; }
.pcr-closing-locations li {
  border-top: 0 !important;
  padding: 0 !important;
}
.pcr-closing-locations li:not(:last-child)::after {
  content: "·";
  margin: 0 .75em;
  opacity: .45;
}

/* ---- Closing CTA ------------------------------------------------------
   It was a centred block floating in navy on an otherwise left-aligned
   page, with a huge heading over two small mismatched buttons. Now a
   left-aligned two-column band: the ask on the left, the actions on the
   right, both on the same baseline grid as every other section. */
.closing-section .pcr-closing-cta {
  /* Same 1180px centred measure as .site-section__inner, so the CTA lines
     up with every other section instead of spanning the full band. */
  max-width: 1180px;
  margin-inline: auto;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  grid-template-areas:
    "head actions"
    "lead actions";
  align-items: start;
  column-gap: clamp(26px, 4vw, 64px);
  margin-top: clamp(40px, 5vh, 76px);
  padding-top: clamp(34px, 4.5vh, 58px);
}
.closing-section .pcr-closing-cta h2 { grid-area: head; }
.closing-section .pcr-closing-cta .intro { grid-area: lead; }
.closing-section .pcr-closing-cta .actions { grid-area: actions; align-self: center; }
.closing-section .pcr-closing-cta h2 {
  margin: 0;
  max-width: 20ch;
  text-align: left;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.08;
}
.closing-section .pcr-closing-cta .intro {
  margin: 14px 0 0;
  margin-inline: 0;
  max-width: 44ch;
  text-align: left;
}
.closing-section .pcr-closing-cta .actions {
  justify-content: flex-start !important;
  margin: 0;
  flex-wrap: wrap;
  gap: 12px;
}
/* The two buttons were small and visually mismatched next to a 3rem
   heading; same size, same shape, one filled and one outlined. */
.closing-section .pcr-closing-cta .actions .primary,
.closing-section .pcr-closing-cta .actions .secondary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 15px 26px;
  border-radius: 99px;
  font: 600 .7rem/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform .22s cubic-bezier(.22,.72,.18,1), box-shadow .22s, background .22s, border-color .22s;
}
.closing-section .pcr-closing-cta .actions .primary:hover,
.closing-section .pcr-closing-cta .actions .secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(0,0,0,.6);
}
.closing-section .pcr-closing-cta .actions .secondary {
  border: 1px solid rgba(255,255,255,.24);
  background: transparent;
  color: var(--ink);
}
.band--light .closing-section .pcr-closing-cta .actions .secondary {
  border-color: rgba(16,34,47,.24);
  color: #10222f;
}

@media (max-width: 860px) {
  .closing-section .pcr-closing-cta {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "lead" "actions";
    row-gap: clamp(18px, 2.6vh, 28px);
    align-items: start;
  }
  .closing-section .pcr-closing-cta .actions { align-self: start; }
}

/* ==========================================================================
   Depth layer
   The page had no depth at all: every section was type on flat colour, one
   plane, one visual weight. A tilt and a glow on the mark did not change
   that. These two additions give the page a foreground/background
   separation it never had.
   ========================================================================== */

/* ---- Industry cards: sector photography ------------------------------- */
.industry-grid .industry-card {
  border-top: 0 !important;
  padding-top: 0 !important;
  gap: 12px;
}
.industry-card__media {
  display: block;
  overflow: hidden;
  margin-bottom: 4px;
  background: rgba(16,34,47,.06);
}
.band--navy .industry-card__media { background: rgba(255,255,255,.04); }
.industry-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.22,.72,.18,1);
}
.industry-card:hover .industry-card__media img { transform: scale(1.04); }

/* ==========================================================================
   Hero depth — geometry, not photography
   A photographic ground read as murk behind the type. Instead the hero gets
   a background plane built from the brand's own geometry: the D form echoed
   at larger radii, a light pool behind the mark, and a faint blueprint grid.
   ========================================================================== */

/* Mark scaled up and allowed to bleed past the right edge (.app-shell clips
   it), so it has BBD-scale presence instead of sitting inside a column. */
.hero__mark {
  max-width: min(52rem, 54vw);
  margin-right: clamp(-9rem, -5vw, 0rem);
}

/* Ghosted echoes: three larger D forms, each fainter and thinner than the
   last, so the eye reads distance. */
.hero-mark__echo {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: heroEchoDrift 18s cubic-bezier(.45,0,.55,1) infinite;
}
.hero-mark__echo path { fill: none; stroke-linecap: round; }
.hero-mark__echo path:nth-child(1) { stroke: rgba(126,221,189,.16); stroke-width: 5; }
.hero-mark__echo path:nth-child(2) { stroke: rgba(29,195,224,.10);  stroke-width: 4; }
.hero-mark__echo path:nth-child(3) { stroke: rgba(92,110,184,.07);  stroke-width: 3; }

@keyframes heroEchoDrift {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.035); opacity: 1; }
}

/* Light pool behind the mark: a single soft source, centred on the figure
   rather than the corner washes that were removed earlier. */
.hero__mark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18% -12% -18% -6%;
  background:
    radial-gradient(closest-side at 58% 50%, rgba(var(--tdc-green-rgb), .13), transparent 72%),
    radial-gradient(closest-side at 74% 44%, rgba(var(--tdc-cyan-rgb), .10), transparent 76%);
  pointer-events: none;
}

/* Blueprint grid: fine, very low contrast, faded out before it reaches the
   copy. Adds surface detail so the ground is not an empty flat field. */
.app-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 78px 78px;
  -webkit-mask-image: radial-gradient(120% 100% at 82% 44%, #000 12%, transparent 72%);
          mask-image: radial-gradient(120% 100% at 82% 44%, #000 12%, transparent 72%);
}
.hero { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .hero-mark__echo { animation: none; }
}

/* ---- Offices: one clean frame per city --------------------------------
   assets/img/who/offices holds montages with a branded text panel baked in
   — unreadable at card size. assets/img/offices carries a single frame
   lifted from each and normalised to 4:3. */
.pcr-closing-locations {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px) !important;
}
.pcr-closing-locations li {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  border-top: 0 !important;
  padding: 0 !important;
}
.pcr-closing-locations li:not(:last-child)::after { content: none; }
.office-media {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}
.office-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.22,.72,.18,1);
}
.pcr-closing-locations li:hover .office-media img { transform: scale(1.04); }
@media (max-width: 760px) {
  .pcr-closing-locations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Hero parallax ----------------------------------------------------
   --px / --py are written by site-chrome.js from pointer position. Using
   the standalone `translate` property rather than `transform` keeps the
   mark's perspective tilt and the rings' scale animation intact. */
.hero__mark { --px: 0; --py: 0; }

.hero-mark__ring,
.hero-mark__bloom {
  translate: calc(var(--px) * 9px) calc(var(--py) * 6px);
  transition: translate .5s cubic-bezier(.22,.72,.18,1);
}
/* Echoes are the far plane: they travel further and the other way. */
.hero-mark__echo {
  translate: calc(var(--px) * -24px) calc(var(--py) * -16px);
  transition: translate .65s cubic-bezier(.22,.72,.18,1);
}
/* The light pool lags slightly behind the figure. */
.hero__mark::before {
  translate: calc(var(--px) * 14px) calc(var(--py) * 9px);
  transition: translate .8s cubic-bezier(.22,.72,.18,1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark__ring, .hero-mark__bloom, .hero-mark__echo, .hero__mark::before {
    translate: none;
  }
}

/* ---- "Where we help" (constants-section): rebuilt from a lopsided
   narrow-list / wide-tile-grid split into one full-width section, so the
   two lists (problems we solve, things that stay constant) sit as
   balanced, independently-scannable grids instead of a cramped sidebar
   next to a much shorter matrix. Reuses .pcr-problem-tile and .diff-item
   as-is; only the surrounding layout changes. */
#where-we-help .pcr-problem-matrix {
  margin-top: clamp(28px, 4vh, 44px);
}
#where-we-help .constants-label {
  margin: clamp(48px, 6vh, 72px) 0 0;
}
#where-we-help .diff-grid {
  margin-top: clamp(20px, 3vh, 30px);
}
@media (min-width: 1000px) {
  #where-we-help .pcr-problem-matrix { grid-template-columns: repeat(4, 1fr); }
}
/* 11th tile (Data migration) added after the shared 10-tile set below —
   give it a border colour too instead of falling back to the default. */
#where-we-help .pcr-problem-tile:nth-child(11) { border-top-color: rgba(var(--tdc-cyan-rgb), .45); }

/* ---- "Our services" split into Services / Technology subgroups -------- */
/* Was one undifferentiated 8-card grid mixing services (FDE, Data
   Analytics, Data Engineering, Business App Development, Our Solutions)
   with technology partners (FORGE, Databricks, DataWalk) that already
   link out to two different pages. A small label now separates the two
   groups; both need extra top spacing — the first to clear the section
   intro above it, the second to read as a new group rather than a
   continuation of the first grid. */
.site-section__inner > .services-subgroup-label:first-child {
  margin-top: clamp(28px, 4vh, 44px);
}
.services-grid + .services-subgroup-label {
  margin-top: clamp(40px, 5vh, 64px);
}

/* ---- "How we work" (homepage only): one column, content flows under --
   the heading like every other homepage section, 2x2 matrix instead of --
   a vertical timeline ------------------------------------------------- */
/* Scoped to .band--navy so what-we-do.html's identical markup for this
   same section (no band class there, still uses .pcr-split) keeps its
   original two-column sticky-aside layout untouched. Drops the
   connecting line — it implied a single top-to-bottom sequence, which
   doesn't fit a 2x2 grid — and turns each step into an independent
   card. */
.how-we-work-section.band--navy .pcr-rhythm-rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
  margin-top: clamp(28px, 4vh, 44px);
}
.how-we-work-section.band--navy .pcr-rhythm-rows::before {
  content: none;
}
.how-we-work-section.band--navy .pcr-rhythm-row {
  padding: 22px;
  border: 1px solid var(--pcr-border);
  border-radius: 10px;
  background: var(--pcr-surface);
}
.how-we-work-section.band--navy .pcr-rhythm-head i {
  position: static;
  width: 36px;
  height: 36px;
}
.how-we-work-section.band--navy .pcr-rhythm-row > p,
.how-we-work-section.band--navy .pcr-rhythm-ways {
  max-width: none;
}
@media (max-width: 700px) {
  .how-we-work-section.band--navy .pcr-rhythm-rows {
    grid-template-columns: 1fr;
  }
}