/* ===== header: current page ===== */
  .primary-nav a[aria-current="page"]::after{ transform:scaleX(1); }

.mobile-nav-links a[aria-current="page"]{ color:var(--c-600); }

/* ===================================================================
     SERVICES PAGE
     One page, one section per service. Every service section uses the
     same layout: icon, name and one-line summary on the left (they stay
     in view while you read), the detail on the right. Details the
     practice has not supplied yet are bracketed placeholders.
     =================================================================== */
  main > section[id]{ scroll-margin-top:96px; }

/* ---- hero ---- */
  .svc-hero{ background:var(--c-100); padding-top:clamp(56px,8vw,112px); padding-bottom:clamp(64px,8vw,112px); }

.svc-hero .container{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(40px,6vw,112px); align-items:center; }

.svc-eyebrow{ margin-bottom:26px; }

.svc-hero h1{ font-size:clamp(2.1rem, 2vw + 1.3rem, 3.25rem); line-height:1.15; letter-spacing:-.01em; text-wrap:balance; }

.svc-lead{ margin-top:26px; max-width:none; font-size:1.125rem; line-height:1.8; color:var(--c-600); }

/* index of the four services */
  .svc-index{ border-top:1px solid var(--c-300); }

.svc-index a{ display:flex; align-items:center; gap:18px; padding:18px 4px; border-bottom:1px solid var(--c-300); font-family:var(--font-display); font-size:1.3125rem; font-weight:500; color:var(--c-950); transition:transform .5s var(--ease), color .4s var(--ease); }

.svc-index .svc-icon{ width:48px; height:48px; }

.svc-index .svc-arrow{ margin-left:auto; width:18px; height:18px; color:var(--c-600); transition:transform .5s var(--ease), color .4s var(--ease); }

@media (hover:hover) and (pointer:fine){
    .svc-index a:hover{ transform:translateX(6px); }
    .svc-index a:hover .svc-arrow{ transform:translateX(4px); color:var(--c-950); }
  }

/* icon in a circle (same family as the Home cards) */
  .svc-icon{ width:56px; height:56px; border-radius:50%; border:1px solid var(--c-300); background:var(--c-100); display:flex; align-items:center; justify-content:center; flex:none; }

.svc-icon img{ height:auto; display:block; }

.svc-icon .i-person{ width:22px; }

.svc-icon .i-couple{ width:36px; }

.svc-icon .i-bird{ width:26px; }

.svc-icon .i-leaf{ width:14px; }

.svc-index .svc-icon .i-person{ width:19px; }

.svc-index .svc-icon .i-couple{ width:31px; }

.svc-index .svc-icon .i-bird{ width:22px; }

.svc-index .svc-icon .i-leaf{ width:12px; }

/* ---- a service section ---- */
  .svc{ background:var(--c-200); padding-block:clamp(64px,8vw,112px); }

.svc--light{ background:var(--c-100); }

.svc--light .svc-icon{ background:var(--c-200); }

.svc-flow{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,7vw,128px); align-items:start; }

.svc-lead-col{ position:sticky; top:112px; }

.svc-lead-col h2{ margin-top:26px; font-size:clamp(1.9rem,1.6vw + 1.4rem,2.5rem); line-height:1.15; }

.svc-summary{ margin-top:18px; font-size:1.125rem; line-height:1.8; color:var(--c-600); max-width:520px; }

.svc-body .about-text{ margin:0; font-size:1.125rem; line-height:1.8; color:var(--c-600); }

.svc-body .about-text + .about-text{ margin-top:20px; }

.svc-sub{ margin-top:36px; font-family:var(--font-display); font-size:1.3125rem; font-weight:500; line-height:1.35; color:var(--c-950); }

.svc-rows{ margin-top:14px; }

.svc-rows li{ display:flex; align-items:baseline; gap:16px; padding:15px 0; border-top:1px solid var(--c-300); font-size:1.0625rem; line-height:1.55; color:var(--c-950); transition:transform .5s var(--ease); }

.svc-rows li:last-child{ border-bottom:1px solid var(--c-300); }

.svc-rows .mark-img{ width:11px; height:11px; flex:none; opacity:.4; position:relative; top:1px; transition:opacity .4s var(--ease), transform .5s var(--ease); }

@media (hover:hover) and (pointer:fine){
    .svc-rows li:hover{ transform:translateX(6px); }
    .svc-rows li:hover .mark-img{ opacity:1; transform:rotate(90deg); }
  }

/* practical details: bracketed placeholders until the practice supplies them */
  .svc-details{ margin-top:36px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px); padding:0; }

.svc-details dt{ font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--c-600); }

.svc-details dd{ margin:8px 0 0; font-size:1.0625rem; line-height:1.5; color:var(--c-950); }

.ph{ color:var(--c-600); font-style:normal; }

.svc-cta{ margin-top:32px; }

/* ---- what I help with (+ who and languages) ---- */
  .svc-help{ background:var(--c-200); padding-block:clamp(64px,8vw,112px); }

.svc-help-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(28px,4vw,72px); }

.svc-help-list li{ border-top:none; border-bottom:1px solid var(--c-300); }

.svc-help-list li:nth-child(-n+2){ border-top:1px solid var(--c-300); }

.svc-facts{ margin-top:clamp(36px,4vw,56px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,56px); }

.svc-facts p:first-child{ font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--c-600); }

.svc-facts p + p{ margin-top:8px; font-size:1.0625rem; line-height:1.6; color:var(--c-950); }

/* ---- closing band: dark, patterned (same as Home) ---- */
  .cta-band{ position:relative; overflow:hidden; background:var(--c-950); padding-block:clamp(88px,11vw,140px); text-align:center; }

.cta-band::before{ content:''; position:absolute; inset:0; background:url(../img/pattern-tile.png) center top / 640px auto repeat; opacity:.6; pointer-events:none; }

.cta-band .container{ position:relative; max-width:none; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }

.cta-band .eyebrow{ margin-bottom:22px; }

.cta-band h2{ color:var(--c-100); font-size:clamp(1.9rem,1.6vw + 1.4rem,2.625rem); line-height:1.2; text-wrap:balance; }

.cta-band h2 em{ font-style:italic; font-weight:500; }

.cta-band p{ margin-top:20px; color:rgba(246,244,241,.68); font-size:1.0625rem; line-height:1.7; max-width:none; }

.cta-band p em{ font-family:var(--font-display); font-style:italic; font-weight:500; color:var(--c-100); }

.cta-band .btn{ margin-top:38px; }

@media (max-width:960px){
    .svc-hero .container{ grid-template-columns:1fr; }
    .svc-flow{ grid-template-columns:1fr; gap:36px; }
    .svc-lead-col{ position:static; }
    .svc-summary{ max-width:none; }
  }

@media (max-width:640px){
    .svc-details{ grid-template-columns:1fr; gap:18px; }
    .svc-help-list{ grid-template-columns:1fr; }
    .svc-help-list li:nth-child(2){ border-top:none; }
    .svc-facts{ grid-template-columns:1fr; }
  }

/* ===== responsive ===== */
  @media (max-width:960px){
    .primary-nav{ display:none; }
    .header-actions .btn{ display:none; }
    .nav-toggle{ display:inline-flex; }

    .mobile-nav{ position:fixed; inset:0; z-index:200; display:flex; align-items:flex-start; justify-content:center; padding:104px 20px 32px; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s linear .4s; }
    .mobile-nav.is-open{ opacity:1; visibility:visible; transition:opacity .4s var(--ease), visibility 0s; }
    .mobile-nav-backdrop{ position:absolute; inset:0; background:rgba(37,48,40,.45); }
    .mobile-nav-panel{ position:relative; z-index:1; width:100%; max-width:420px; max-height:100%; overflow-y:auto; display:flex; flex-direction:column; background:var(--c-100); border-radius:var(--radius-lg); box-shadow:0 32px 64px -24px rgba(37,48,40,.5); padding:26px 26px 30px; transform:translateY(14px) scale(.98); transition:transform .45s var(--ease); }
    .mobile-nav.is-open .mobile-nav-panel{ transform:translateY(0) scale(1); }
    .mobile-nav-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
    .mobile-nav-label{ margin:0; }
    .mobile-nav-close{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; flex:none; border:1px solid var(--c-300); background:none; color:var(--c-950); cursor:pointer; transition:background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
    .mobile-nav-close svg{ width:14px; height:14px; }
    .mobile-nav-close:hover{ background:var(--c-950); border-color:var(--c-950); color:var(--c-100); }
    .mobile-nav-close:active{ transform:scale(.92); }
    .mobile-nav-links{ display:flex; flex-direction:column; }
    .mobile-nav-links a{ padding:15px 2px; font-family:var(--font-body); font-size:1.3125rem; font-weight:500; color:var(--c-950); border-bottom:1px solid var(--c-300); }
    .mobile-nav-links a:first-child{ padding-top:2px; }
    .mobile-nav-links a:last-child{ border-bottom:none; }
    .mobile-nav-cta{ margin-top:26px; width:100%; }
    body.nav-open{ overflow:hidden; }

    .footer-top{ grid-template-columns:1fr 1fr; row-gap:40px; }
  }

@media (max-width:640px){
    .site-header .container{ height:76px; }
    .site-header .logo-img{ height:32px; }
    .mobile-nav{ padding-top:92px; }
    /* buttons hug their labels (both as wide as the longer one, centred) instead of stretching across the screen */
    .footer-top{ grid-template-columns:1fr; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; }
  }