/* Design 3 — "Panels": modern professional-services feel. Index becomes a horizontal
   tab bar under the header; content sits in tinted panels; larger imagery. */

main {
  grid-template-columns: minmax(0,1fr) !important;
  gap: 0 !important;
  max-width: 1320px !important;
}
main::before { display: none !important; }

/* rail -> sticky horizontal tab bar */
.rail {
  position: sticky !important;
  top: calc(var(--header-h, 88px)) !important;
  z-index: 12;
  background: var(--color-bg);
  padding: 12px 0 0 !important;
  margin-bottom: 8px;
  border-right: 0 !important;
  border-bottom: 1px solid var(--color-divider);
  min-height: 0 !important;
}
.rail > div:first-child { display: none !important; }
.rail > div:nth-child(2) { display: none !important; }
.rail nav { flex-direction: row !important; flex-wrap: wrap; gap: 0 !important; }
.rail nav > a, .rail nav > div > a {
  padding: 10px 18px !important; border-bottom: 2px solid transparent;
  font-size: 14px !important;
}
.rail nav > a:first-child { padding-left: 0 !important; }
.rail nav > a:hover { border-bottom-color: var(--sky); }
.rail nav > div { display: flex !important; flex-direction: row !important; align-items: baseline; }
.rail nav a[href^="#svc-"], .rail nav button { display: none !important; }

/* hero: photo larger, text panel tinted */
.hero { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important; gap: 40px !important; align-items: stretch !important; }
.hero > div:first-child {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 38px 34px;
  display: flex; flex-direction: column; justify-content: center;
}
.hero .lede { font-size: 19px !important; max-width: none !important; }
.hero-art { height: auto !important; min-height: 400px; border-radius: var(--radius-md) !important; }
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0,1fr) !important; gap: 28px !important; }
  .hero-art { min-height: 0 !important; height: 300px !important; }
}
@media (max-width: 620px) { .hero-art { height: 220px !important; } }

/* section headings get a colored eyebrow chip */
.sec { margin-top: 60px !important; }
.kick {
  display: inline-block;
  background: var(--navy); color: #fff !important;
  padding: 6px 12px; border-radius: 3px;
  letter-spacing: 0.12em !important;
}

/* about: both columns in panels */
#about [data-grid="about"] { gap: 32px !important; align-items: stretch; }
#about [data-grid="about"] > div {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 32px 30px;
}
#about [data-grid="about"] > div:nth-child(2) { padding-top: 32px !important; }
#about dl div { border-top-color: rgba(0,0,0,0.12) !important; }

/* why-us as equal cards */
[data-grid="why"] { gap: 24px !important; }
[data-grid="why"] > div {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border-top: 4px solid var(--sky);
  padding: 26px 24px 28px;
}
[data-grid="why"] > div > div:first-child {
  font-size: 26px !important; color: var(--navy) !important;
}
[data-grid="why"] > div h4 { font-size: 19px !important; }
/* 3 across, then 2 across — both rows fill the width */
[data-grid="why"] { grid-template-columns: repeat(6, minmax(0,1fr)) !important; }
[data-grid="why"] > div { grid-column: span 2; }
[data-grid="why"] > div:nth-child(4), [data-grid="why"] > div:nth-child(5) { grid-column: span 3; }
@media (max-width: 900px) {
  [data-grid="why"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [data-grid="why"] > div, [data-grid="why"] > div:nth-child(4) { grid-column: span 1; }
  [data-grid="why"] > div:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 620px) {
  [data-grid="why"] { grid-template-columns: minmax(0,1fr) !important; }
  [data-grid="why"] > div, [data-grid="why"] > div:nth-child(4), [data-grid="why"] > div:nth-child(5) { grid-column: span 1; }
}

/* testimonials as solid panels */
[data-grid="quotes"] > div {
  border: 0 !important;
  background: var(--color-surface);
  border-left: 4px solid var(--navy) !important;
  padding: 28px 26px !important;
}

/* ---- other pages ---- */

/* Services: offering rows in panels */
.svc > div[data-grid="split"] {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 30px 30px 32px;
  gap: 34px !important;
}

/* Case studies: intro + fact ledger in panels, photo squared to the panel radius */
article[id] > div[data-grid="split"] > div:nth-child(2) {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 26px 26px 28px;
}
.stage > div { background: var(--color-surface); border-radius: var(--radius-md); padding: 22px 22px 24px; }
.stage > div > div:first-child { background: var(--sky) !important; }
.val > div { background: var(--color-surface); border-radius: var(--radius-md); padding: 22px 22px 24px; }

/* Team: photo frames pick up the panel tint */
.person > div:first-child { background: var(--color-surface) !important; }

/* Contact: form and directory in panels */
#enquiry > div:first-child > form {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 28px 28px 30px;
}
#directors {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 28px 26px !important;
}

@media (max-width: 1040px) {
  .rail { position: static !important; }
  main { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 900px) {
  .svc > div[data-grid="split"] { grid-template-columns: minmax(0,1fr) !important; gap: 20px !important; }
  article[id] > div[data-grid="split"] { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 860px) {
  #about [data-grid="about"] { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 760px) {
  .hero > div:first-child, #about [data-grid="about"] > div, [data-grid="why"] > div,
  .svc > div[data-grid="split"], .stage > div, .val > div,
  #enquiry > div:first-child > form, #directors { padding: 22px 20px !important; }
}

.kick { white-space: nowrap; height: auto !important; line-height: 1.3 !important; overflow: visible !important; width: auto !important; }

/* At a Glance ledger: label left, content right; rows spread so the last row
   lines up with the bottom of the About panel beside it */
#about [data-grid="about"] > div:nth-child(2) { display: flex; flex-direction: column; padding: 32px 30px !important; }
#about [data-grid="about"] > div:nth-child(2) > dl { flex: 1; justify-content: space-between; }
#about dl > div { padding: 12px 0 !important; gap: 16px !important; align-items: start; }
#about dl dt { font-size: 12px !important; padding-top: 2px; }
#about dl dd { font-size: 15px !important; line-height: 1.5 !important; }
#about dl dd > div { gap: 6px !important; }
#about dl dd > div > a { min-height: 36px !important; padding: 7px 10px !important; font-size: 13px !important; line-height: 1.2 !important; }
/* services: two rows of two */
#about dl dd > div:has(> a[href*="#svc-"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* claim types: as many as fit, never wider than the column */
#about dl dd > div:has(> a[href*="#claim-types"]) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 118px), 1fr)) !important; }
@media (max-width: 620px) {
  #about dl > div { grid-template-columns: minmax(0,1fr) !important; gap: 8px !important; }
}

/* ledger label column sized to its words, not a fixed 9.5em */
#about dl > div { grid-template-columns: 6.8em minmax(0,1fr) !important; }
#about dl dd > div > a { overflow-wrap: anywhere; hyphens: auto; }
/* mid widths: the right panel is too narrow for side-by-side blocks —
   put the About panels one above the other so the ledger gets full width */
@media (max-width: 1180px) {
  #about [data-grid="about"] { grid-template-columns: minmax(0,1fr) !important; }
  #about [data-grid="about"] > div:nth-child(2) > dl { justify-content: flex-start; }
}

/* Our Approach cards: number, title and text line up across each row */
#approach [data-grid="why"] > div { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
#approach [data-grid="why"] > div > h4 { align-self: start; }
#approach [data-grid="why"] > div > p { align-self: start; }
@supports not (grid-template-rows: subgrid) {
  #approach [data-grid="why"] > div > h4 { min-height: 2.6em; }
}

/* claim types: always 3 across (3 rows of 3) on desktop */
#about dl dd > div:has(> a[href*="#claim-"]) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
#about dl dd > div:has(> a[href*="#claim-"]) > a { font-size: 12px !important; padding: 7px 8px !important; }
@media (max-width: 480px) { #about dl dd > div:has(> a[href*="#claim-"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Value in Action: every box's paragraph starts on the same line */
.val { grid-auto-rows: auto; }
.val > div { display: grid !important; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.val > div > h4 { align-self: end; margin-top: 0; }

/* mobile: freeze the "In this page" bar under the header, one scrollable row */
@media (max-width: 1040px) {
  html body main > .rail {
    position: sticky !important;
    top: var(--header-h, 64px) !important;
    z-index: 30;
    background: var(--color-bg);
    margin: 0 -24px 8px !important;
    padding: 0 24px !important;
    border-bottom: 1px solid var(--color-divider);
    box-shadow: 0 6px 12px -10px rgba(18, 22, 62, 0.35);
  }
  html body main > .rail nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html body main > .rail nav::-webkit-scrollbar { display: none; }
  html body main > .rail nav > a, html body main > .rail nav > div { flex: none; padding: 12px 0 !important; }
}
@media (min-width: 761px) and (max-width: 1040px) {
  html body main > .rail { margin: 0 -48px 8px !important; padding: 0 48px !important; }
}


/* case study pager: stack on phones */
@media (max-width: 640px) {
  .cs-pager { grid-template-columns: minmax(0,1fr) !important; justify-items: center; text-align: center; }
  .cs-pager > a { justify-self: center !important; text-align: center !important; padding: 10px 0; }
  .cs-pager > a:nth-child(2) { order: -1; }
  .cs-pager-top { gap: 0 !important; }
  .cs-pager-top > a { padding: 6px 0 !important; }
}

/* team grid: center any partial last row */
#people .person-grid { display: flex !important; flex-wrap: wrap; justify-content: center; }
#people .person-grid > .person { flex: 0 0 calc((100% - 3 * 44px) / 4); min-width: 0; }
@media (max-width: 1100px) { #people .person-grid > .person { flex-basis: calc((100% - 2 * 44px) / 3); } }
@media (max-width: 760px) { #people .person-grid { column-gap: 20px !important; } #people .person-grid > .person { flex-basis: calc((100% - 20px) / 2); } }

/* mobile: anchor jumps stop below header + pinned "In this page" bar */
@media (max-width: 1040px) {
  html { scroll-padding-top: calc(var(--header-h, 64px) + 62px) !important; }
  [id] { scroll-margin-top: 0 !important; }
}

/* anchor jumps clear the header + pinned bar at every width (no-JS fallback) */
html { scroll-padding-top: calc(var(--header-h, 88px) + 72px) !important; }

/* Uri + Recall: center the At a Glance contents vertically in the box */
#uri [data-grid="split"] > div:last-child,
#theft [data-grid="split"] > div:last-child,
#recall [data-grid="split"] > div:last-child { display: flex !important; flex-direction: column; justify-content: center; }

/* case studies: Value in Action columns slightly tighter than the Loss/Process/Results row */
article .val { column-gap: 36px !important; }