/* ==========================================================================
   Services page. Loads after styles.css and only adds what that file lacks.
   Tokens only. Square corners. Gold is rationed. Breakpoints: 1080, 900, 640, 420.
   ========================================================================== */

/* ---------- Hero: the four services as a jump list ---------- */
.svc-index { align-self: center; }
/* the list starts on the top line of the title */
@media (min-width: 901px) { .svc-index { align-self: start; margin-top: 40px; } }
.svc-index ol { counter-reset: idx; border-top: 1px solid var(--rule); }
.svc-index li { counter-increment: idx; border-bottom: 1px solid var(--rule); }
.svc-index a { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; min-height: 66px; padding-right: 6px; font: 700 26px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--on-dark); transition: color .25s var(--ease); }
.svc-index a::before { content: counter(idx, decimal-leading-zero); font-weight: 800; font-size: 22px; letter-spacing: .04em; color: var(--gold); }
.svc-index .arr { color: var(--on-dark-muted); transition: transform .25s var(--ease), color .25s var(--ease); }
.svc-index a:hover, .svc-index a:focus-visible { color: var(--gold); }
.svc-index a:hover .arr, .svc-index a:focus-visible .arr { color: var(--gold); }
@media (max-width: 1080px) {
  .svc-index a { font-size: 23px; grid-template-columns: 50px 1fr auto; }
}
@media (max-width: 900px) {
  .svc-hero .ihero-inner { gap: 36px; }
  .svc-index { max-width: 620px; }
  .svc-index a { min-height: 60px; }
}

/* ---------- Small parts shared by the service blocks ---------- */
.svc-note { margin-top: 30px; padding: 4px 0 4px 22px; border-left: 3px solid var(--gold); font: 700 clamp(24px, 2.4vw, 30px)/1.08 var(--display); letter-spacing: .01em; text-transform: uppercase; color: var(--fg); }
.svc-label { margin-bottom: 30px; font: 700 13px/1.4 var(--text); letter-spacing: .28em; text-transform: uppercase; color: var(--slate); }
.svc-body > .actions { margin-top: 48px; }
/* the first service sits under the white cut of the hero, so it needs less room on top */
#consulting { padding-top: 84px; }

/* ---------- 1-on-1 Consulting: who you meet, and what you leave with ---------- */
.meet { position: relative; display: grid; grid-template-columns: 320px 1fr; background: var(--deep); }
.meet::after { content: ""; position: absolute; right: 0; bottom: 0; width: 38px; height: 38px; background: var(--gold); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.meet-photo { position: relative; min-height: 380px; overflow: hidden; background: var(--deep); }
/* the photo is shown larger than its box so the empty sky above the head is cropped away */
/* lighten lets the night sky in the photo take the navy of the panel, so there is no hard edge */
.meet-photo img { position: absolute; left: 0; bottom: 0; width: 100%; max-width: none; height: 128%; object-fit: cover; object-position: 38% 100%; mix-blend-mode: lighten; }
.meet-copy { align-self: center; padding: 56px 64px 60px 56px; }
.meet-copy .eyebrow { margin-bottom: 26px; }
.meet-list { counter-reset: walk; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; }
.meet-list li { counter-increment: walk; position: relative; padding-top: 24px; border-top: 1px solid var(--rule); font: 600 19px/1.45 var(--text); color: var(--on-dark); text-wrap: pretty; }
.meet-list li::before { content: counter(walk, decimal-leading-zero); display: block; margin-bottom: 12px; font: 800 44px/.9 var(--display); color: var(--gold); }
.meet-list li::after { content: ""; position: absolute; left: 0; top: -1px; width: 56px; height: 3px; background: var(--gold); }
.meet-by { margin-top: 34px; font-size: 14.5px; color: var(--on-dark-muted); }
.meet-by b { display: block; font: 700 20px/1.1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark); }
@media (max-width: 1080px) {
  .meet { grid-template-columns: 280px 1fr; }
  .meet-copy { padding: 48px 44px 52px 40px; }
  .meet-list { gap: 28px 32px; }
}
@media (max-width: 900px) {
  .meet { grid-template-columns: 260px 1fr; }
  .meet-photo img { height: 100%; object-position: 40% 100%; }
  .meet-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #consulting { padding-top: 56px; }
  .meet { grid-template-columns: 1fr; }
  .meet-photo { min-height: 0; aspect-ratio: 5 / 4; }
  .meet-photo img { height: 132%; object-position: 40% 100%; }
  .meet-copy { padding: 36px 24px 48px; }
  .svc .actions .btn { width: 100%; }
}

/* ---------- Systems Install: the two panels and the three products ---------- */
.duo-panel .h3 { max-width: 14em; }
.duo-panel p:not(.eyebrow) { max-width: 40ch; font-size: 17.5px; }
.kit { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; background: var(--white); border: 1px solid var(--rule); }
.kit li { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto 1fr; gap: 4px 22px; align-items: start; padding: 30px 32px 32px; }
.kit li + li { border-left: 1px solid var(--rule); }
.kit .icon { grid-row: 1 / span 2; width: 52px; height: 52px; color: var(--navy); }
.kit .icon * { vector-effect: non-scaling-stroke; }
.kit h3 { font: 800 32px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.kit p { color: var(--slate); font-size: 15.5px; line-height: 1.45; }
@media (max-width: 1080px) {
  .kit li { padding: 26px 22px 28px; gap: 4px 16px; }
}
@media (max-width: 900px) {
  .kit { grid-template-columns: 1fr; }
  .kit li + li { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ---------- Change Management: a dark band with the cut on its top edge ---------- */
.svc--dark { --cut: 72px; --cut-sw: 3.33; --cut-x: 30%; overflow: hidden; padding-top: calc(var(--pad) + var(--cut)); background: linear-gradient(180deg, var(--navy) 0%, var(--deep) 70%); }
.svc + .svc--dark { border-top: 0; }
.svc--dark::before { content: ""; position: absolute; top: -1px; left: 0; z-index: 2; width: calc(var(--cut-x) + var(--cut)); height: calc(var(--cut) + 1px); background: var(--seam); clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.svc--dark .cutline { top: 0; bottom: auto; }
.svc--dark .wrap { position: relative; z-index: 3; }
@media (max-width: 900px) { .svc--dark { --cut: 56px; --cut-sw: 4.29; --cut-x: 36%; } }
@media (max-width: 640px) { .svc--dark { --cut: 40px; --cut-sw: 6; --cut-x: 44%; } }

/* ---------- How the firm delivers ---------- */
.how .pillars { margin-top: 64px; }
.how .pillars li { padding-top: 28px; }
.how .pillars .icon { width: 48px; height: 48px; margin-bottom: 20px; color: var(--navy); }
.how .pillars .icon * { vector-effect: non-scaling-stroke; }
@media (max-width: 900px) { .how .pillars { margin-top: 48px; } }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px 80px; align-items: start; }
.faq-grid .faq { max-width: none; }
.faq-grid .faq summary { min-height: 76px; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 640px) {
  .faq-grid .faq summary { padding-right: 48px; }
  .faq-grid .faq details > :not(summary) { padding-right: 0; }
}

/* ---------- Pricing note ---------- */
.pricenote { --eyebrow: var(--slate); position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 56px; padding: 48px 64px 52px 56px; background: var(--mist); }
.pricenote::after { content: ""; position: absolute; right: 0; bottom: 0; width: 38px; height: 38px; background: var(--gold); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.pricenote .eyebrow { margin-bottom: 14px; }
.pricenote p:not(.eyebrow) { margin-top: 10px; color: var(--slate); }
.pricenote .btn { flex: none; }
@media (max-width: 640px) {
  .pricenote { padding: 36px 24px 52px; }
  .pricenote .btn { width: 100%; }
}