/* /services — designed by hand, 10 Nov 2026. Every selector is scoped to .dz-services. */
.dz-services { --sv-tint: #f5f4ef; --sv-soft: #c9c9c1; }
.dz-services h2, .dz-services h3 { margin-top: 0; }

/* Hero: full-bleed photograph under a dark wash */
.dz-services .sv-hero { position: relative; min-height: clamp(620px, calc(100vh - 143px), 860px); display: flex; align-items: center; background: var(--black); overflow: hidden; }
.dz-services .sv-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.dz-services .sv-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(14,14,14,.9) 0%, rgba(14,14,14,.78) 36%, rgba(14,14,14,.25) 62%, rgba(14,14,14,0) 80%); }
.dz-services .sv-hero-in { position: relative; z-index: 2; width: 100%; padding-top: 60px; padding-bottom: 170px; }
.dz-services .sv-hero-copy { max-width: 640px; color: var(--white); }
.dz-services .sv-hero-copy h1 { color: var(--white); margin: 0 0 22px; }
.dz-services .sv-hero-copy p { color: #e8e8e2; max-width: 560px; }
.dz-services .sv-btn-light { background: transparent; color: var(--white); border-color: var(--white); }
.dz-services .sv-btn-light:hover { background: rgba(255,255,255,.12); }

/* The three pillars, pulled up over the bottom of the hero */
.dz-services .sv-pillars { position: relative; z-index: 3; margin-top: -120px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--white); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(14,14,14,.16); overflow: hidden; }
.dz-services .sv-pillar { display: flex; flex-direction: column; padding: 34px 36px 32px; border-left: 1px solid var(--line); transition: background .15s; }
.dz-services .sv-pillar:first-child { border-left: 0; }
.dz-services .sv-pillar:hover { background: var(--sv-tint); }
.dz-services .sv-p-name { font-family: "Anton", "Arial Narrow", sans-serif; font-size: clamp(2.2rem, 3.4vw, 3.1rem); line-height: 1; color: var(--black); }
.dz-services .sv-p-line { margin: 14px 0 22px; }
.dz-services .sv-p-go { margin-top: auto; font-weight: 700; color: var(--black); display: inline-flex; align-items: center; gap: 10px; }
.dz-services .sv-p-go::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v13M6 12l6 6 6-6' fill='none' stroke='%230e0e0e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; flex: none; }

/* Accounting: sticky rail beside a 3 x 3 index of the services */
.dz-services .sv-acc { padding: 110px 0 110px; scroll-margin-top: 80px; }
.dz-services .sv-acc-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.dz-services .sv-acc-rail { position: sticky; top: 124px; }
.dz-services .sv-acc-rail h2 { margin-bottom: 18px; }
.dz-services .sv-who-h { margin: 44px 0 12px; }
.dz-services .sv-who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.dz-services .sv-who a { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.dz-services .sv-who a:hover { text-decoration-color: var(--black); }
.dz-services .sv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--black); border-left: 1px solid var(--line); }
.dz-services .sv-cell { display: flex; flex-direction: column; padding: 28px 26px 26px; min-height: 230px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .15s; }
.dz-services .sv-cell:hover { background: var(--sv-tint); }
.dz-services .sv-cell h3 { margin: 0 0 10px; }
.dz-services .sv-cell p { margin: 0; }
.dz-services .sv-cell .sv-price { margin-top: auto; padding-top: 16px; font-weight: 700; color: var(--black); }
.dz-services .sv-cell:hover h3 { text-decoration: underline; text-decoration-color: var(--black); text-underline-offset: 5px; }

/* Advisory: black, the fee ladder beside a photograph that runs to the window edge */
.dz-services .sv-adv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--black); color: var(--white); scroll-margin-top: 80px; }
.dz-services .sv-adv-text { padding: 100px 56px 100px max(24px, calc(50vw - 596px)); }
.dz-services .sv-adv h2 { color: var(--white); margin-bottom: 26px; }
.dz-services .sv-ladder { list-style: none; margin: 0; padding: 0; }
.dz-services .sv-ladder li a { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 6px 28px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.2); color: var(--white); }
.dz-services .sv-l-name { font-weight: 900; font-size: 1.2rem; grid-column: 1; }
.dz-services .sv-l-desc { grid-column: 1; color: var(--sv-soft); }
.dz-services .sv-l-price { grid-column: 2; grid-row: 1 / span 2; text-align: right; color: var(--sv-soft); }
.dz-services .sv-l-price b { display: block; font-family: "Anton", "Arial Narrow", sans-serif; font-weight: 400; font-size: 2.5rem; line-height: 1.05; color: var(--white); }
.dz-services .sv-ladder li a:hover .sv-l-name { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.dz-services .sv-ladder li.sv-ladder-h { padding: 30px 0 4px; border-top: 1px solid rgba(255,255,255,.2); font-weight: 900; color: var(--lime); }
.dz-services .sv-ladder-note { color: var(--sv-soft); margin: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.2); }
.dz-services .sv-adv-links { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.dz-services .sv-adv-links a { display: inline-block; padding: 10px 18px; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; color: var(--white); font-weight: 700; }
.dz-services .sv-adv-links a:hover { background: var(--lime); border-color: var(--lime); color: var(--black); }
.dz-services .sv-adv-photo { margin: 0; position: relative; min-height: 100%; }
.dz-services .sv-adv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 30%; }

/* Coaching: a full-width photograph, then the heading row and a 3 x 2 list */
.dz-services .sv-coach { scroll-margin-top: 80px; }
.dz-services .sv-coach-photo { margin: 0; height: clamp(300px, 36vw, 520px); }
.dz-services .sv-coach-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; }
.dz-services .sv-coach-in { padding-top: 72px; padding-bottom: 100px; }
.dz-services .sv-coach-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 64px; align-items: start; }
.dz-services .sv-coach-head h2 { grid-row: 1 / span 2; margin: 0; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1; }
.dz-services .sv-coach-head p { margin: 0; }
.dz-services .sv-coach-head .btn-row { margin-top: 0; }
.dz-services .sv-coach-list { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.dz-services .sv-coach-list a { display: block; height: 100%; padding: 22px 0 30px; border-top: 2px solid var(--black); }
.dz-services .sv-coach-list h3 { margin: 0 0 8px; }
.dz-services .sv-coach-list p { margin: 0; }
.dz-services .sv-coach-list a:hover h3 { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 4px; text-underline-offset: 5px; }

/* Questions, 2 x 2 */
.dz-services .sv-faq { padding: 96px 0; border-top: 1px solid var(--line); }
.dz-services .sv-faq h2 { margin-bottom: 44px; }
.dz-services .sv-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 64px; }
.dz-services .sv-q { padding-top: 20px; border-top: 2px solid var(--black); }
.dz-services .sv-q h3 { margin: 0 0 12px; }
.dz-services .sv-q p { margin: 0; }
.dz-services .sv-q a, .dz-services .sv-call a { text-decoration: underline; text-underline-offset: 3px; }

/* Close: how it starts, on a lime tint */
.dz-services .sv-start { background: var(--sv-tint); padding: 100px 0; }
.dz-services .sv-start-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.dz-services .sv-start-head { position: sticky; top: 124px; }
.dz-services .sv-call { margin-top: 22px; }
.dz-services .sv-steps { list-style: none; margin: 0; padding: 0; }
.dz-services .sv-steps li { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; padding-bottom: 34px; }
.dz-services .sv-steps li:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: var(--black); }
.dz-services .sv-n { width: 56px; height: 56px; border-radius: 50%; background: var(--lime); border: 2px solid var(--black); display: flex; align-items: center; justify-content: center; font-family: "Anton", "Arial Narrow", sans-serif; font-size: 1.5rem; color: var(--black); }
.dz-services .sv-steps h3 { margin: 12px 0 6px; }
.dz-services .sv-steps p { margin: 0; }

@media (max-width: 1100px) {
  .dz-services .sv-acc-in { grid-template-columns: 1fr; gap: 44px; }
  .dz-services .sv-acc-rail { position: static; max-width: 720px; }
  .dz-services .sv-adv-text { padding-right: 40px; }
}
@media (max-width: 860px) {
  .dz-services .sv-hero { display: block; min-height: 0; }
  .dz-services .sv-hero-img { position: static; height: 46vh; min-height: 280px; max-height: 420px; object-position: 62% 30%; }
  .dz-services .sv-hero::before { display: none; }
  .dz-services .sv-hero-in { padding-top: 36px; padding-bottom: 110px; }
  .dz-services .sv-pillars { grid-template-columns: 1fr; margin-top: -70px; }
  .dz-services .sv-pillar { border-left: 0; border-top: 1px solid var(--line); padding: 26px 24px; }
  .dz-services .sv-pillar:first-child { border-top: 0; }
  .dz-services .sv-acc { padding: 72px 0; }
  .dz-services .sv-grid { grid-template-columns: 1fr; }
  .dz-services .sv-cell { min-height: 0; padding: 22px 20px; }
  .dz-services .sv-adv { grid-template-columns: 1fr; }
  .dz-services .sv-adv-photo { order: -1; height: 300px; min-height: 0; }
  .dz-services .sv-adv-text { padding: 56px 24px 64px; }
  .dz-services .sv-ladder li a { grid-template-columns: 1fr; }
  .dz-services .sv-l-price { grid-column: 1; grid-row: auto; text-align: left; margin-top: 6px; }
  .dz-services .sv-coach-head { grid-template-columns: 1fr; }
  .dz-services .sv-coach-head h2 { grid-row: auto; }
  .dz-services .sv-coach-in { padding-top: 48px; padding-bottom: 64px; }
  .dz-services .sv-coach-list { grid-template-columns: 1fr; margin-top: 36px; }
  .dz-services .sv-faq { padding: 64px 0; }
  .dz-services .sv-faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .dz-services .sv-start { padding: 64px 0; }
  .dz-services .sv-start-in { grid-template-columns: 1fr; gap: 40px; }
  .dz-services .sv-start-head { position: static; }
}