/* eachcanteach — Services */

/* ---------- hero ---------- */
.sv-hero{padding:150px 0 72px; background-position:60% 30%;}
.sv-hero-copy{max-width:720px;}
.sv-hero .eyebrow{margin-bottom:20px;}
.sv-hero h1{color:#fff; font-size:clamp(2.4rem,4.8vw,3.9rem); line-height:1.06; margin-bottom:20px;}
.sv-lede{font-size:1.12rem; line-height:1.6; color:#d9eeee; max-width:56ch; margin-bottom:34px;}
.sv-facts{list-style:none; margin:0; padding:20px 0 0; display:flex; flex-wrap:wrap; gap:14px 44px; border-top:1px solid rgba(255,255,255,.2);}
.sv-facts li{display:flex; align-items:baseline; gap:10px;}
.sv-facts strong{font-family:'Jost',sans-serif; font-weight:500; font-size:2rem; line-height:1; color:#fff;}
.sv-facts span{font-size:.9rem; color:#bfe9ea;}

/* ---------- group bar (sticks under the site nav) ---------- */
.sv-nav{position:sticky; top:77px; z-index:40; background:color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.sv-nav-track{display:flex; gap:8px; padding:12px 0; overflow-x:auto; scrollbar-width:none;}
.sv-nav-track::-webkit-scrollbar{display:none;}
.sv-chip{
  flex:none; display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:8px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-strong); font-size:.88rem; font-weight:500; white-space:nowrap;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.sv-chip span{font-size:.74rem; color:var(--ink-faint); font-variant-numeric:tabular-nums;}
.sv-chip:hover{border-color:var(--accent);}
.sv-chip.is-current{background:var(--accent); border-color:var(--accent); color:#fff;}
.sv-chip.is-current span{color:rgba(255,255,255,.8);}

/* ---------- groups ---------- */
.sv-main{background:var(--paper);}
.sv-group{padding:72px 0 16px; scroll-margin-top:140px;}
.sv-group:last-of-type{padding-bottom:96px;}
.sv-group-head{display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:20px; align-items:start; margin-bottom:28px; padding-bottom:22px; border-bottom:1px solid var(--line);}
.sv-group-icon{width:56px; height:56px; display:grid; place-items:center; background:var(--accent); color:#fff;}
.sv-group-icon svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.sv-group-head h2{font-size:clamp(1.7rem,3vw,2.3rem); margin:0 0 6px;}
.sv-group-head p{color:var(--ink-soft); font-size:1.02rem; line-height:1.6; margin:0; max-width:62ch;}
.sv-group-count{font-size:.8rem; font-weight:600; color:var(--accent-deep); padding:6px 12px; border:1px solid var(--line); background:var(--surface); white-space:nowrap; align-self:center;}

/* ---------- service cards ---------- */
.sv-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; align-items:start;}
.sv-card{background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); transition:border-color .2s ease, box-shadow .2s ease;}
.sv-card:hover{box-shadow:0 22px 40px -32px rgba(0,0,0,.45);}
.sv-card summary{list-style:none; display:block; padding:24px 26px 0; cursor:default;}
.sv-card summary::-webkit-details-marker{display:none;}
.sv-card h3{font-size:1.3rem; text-transform:none; margin:0 0 8px;}
.sv-card summary p{color:var(--ink-soft); font-size:.97rem; line-height:1.6; margin:0;}
.sv-toggle{display:none;}
.sv-card-body{padding:18px 26px 24px;}
.sv-label{display:block; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px;}
.sv-list{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.sv-list li{display:grid; grid-template-columns:18px 1fr; gap:10px; font-size:.94rem; line-height:1.5; color:var(--ink);}
.sv-list svg{width:16px; height:16px; margin-top:3px; fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.sv-card-foot{margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); display:grid; gap:8px;}
.sv-card-foot p{margin:0; font-size:.9rem; color:var(--ink-soft); line-height:1.55;}
.sv-card-foot .sv-label{display:inline; margin:0 6px 0 0; color:var(--accent-deep);}
.sv-note{font-size:.84rem !important; color:var(--ink-faint) !important;}

/* ---------- help band between groups ---------- */
.sv-help{padding:40px 0 8px;}
.sv-help-box{display:flex; align-items:center; justify-content:space-between; gap:20px 36px; flex-wrap:wrap; padding:30px 34px; background:#0a3a3d; color:#e7f4f3;}
.sv-help-box h2{color:#fff; font-size:clamp(1.4rem,2.4vw,1.8rem); margin:0 0 6px;}
.sv-help-box p{margin:0; color:#c6dedd; max-width:58ch;}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .sv-grid{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .sv-nav{top:63px;}
}
@media (max-width:760px){
  .sv-hero{padding:104px 0 44px;}
  .sv-lede{font-size:1rem; margin-bottom:26px;}
  .sv-facts{gap:12px 26px;}
  .sv-facts strong{font-size:1.6rem;}
  .sv-nav-track{padding:10px 0; -webkit-mask-image:linear-gradient(90deg, #000 88%, transparent); mask-image:linear-gradient(90deg, #000 88%, transparent);}
  .sv-group{padding:44px 0 8px; scroll-margin-top:124px;}
  .sv-group:last-of-type{padding-bottom:64px;}
  .sv-group-head{grid-template-columns:44px minmax(0,1fr); gap:14px; margin-bottom:18px; padding-bottom:18px;}
  .sv-group-icon{width:44px; height:44px;}
  .sv-group-icon svg{width:22px; height:22px;}
  .sv-group-count{grid-column:2; justify-self:start; margin-top:-4px;}
  .sv-grid{gap:10px;}
  /* phones: each card folds to its name and one-line summary; tap to open */
  .sv-card summary{padding:18px 18px 16px; cursor:pointer;}
  .sv-card h3{font-size:1.14rem;}
  .sv-card summary p{font-size:.93rem;}
  .sv-toggle{display:inline-flex; align-items:center; gap:8px; margin-top:12px; min-height:28px; font-size:.86rem; font-weight:600; color:var(--accent-deep);}
  .sv-toggle::after{content:""; width:8px; height:8px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s ease;}
  .sv-card[open] .sv-toggle::after{transform:rotate(-135deg) translate(-2px,-2px);}
  .sv-toggle-close{display:none;}
  .sv-card[open] .sv-toggle-open{display:none;}
  .sv-card[open] .sv-toggle-close{display:inline;}
  .sv-card-body{padding:0 18px 20px;}
  .sv-help{padding:28px 0 0;}
  .sv-help-box{padding:24px 20px;}
  .sv-help-box .btn{width:100%; display:flex; align-items:center; justify-content:center;}
}

/* Group bar: chips wrap on wide screens (nothing hidden at the edge); phones get one "Jump to" picker */
.sv-nav-track{flex-wrap:wrap; overflow:visible;}
.sv-jump{display:none;}
@media (max-width:760px){
  .sv-nav-track{display:none;}
  .sv-jump{display:flex; align-items:center; gap:12px; padding:10px 0;}
  .sv-jump span{font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap;}
  .sv-jump select{
    flex:1; min-width:0; height:44px; padding:0 40px 0 14px; font:inherit; font-size:16px; font-weight:600; color:var(--ink-strong);
    background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230e8a8f' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
    border:1px solid var(--line); border-radius:0; -webkit-appearance:none; appearance:none;
  }
}
/* the bar only sticks when it fits on one line; narrower screens show it once, wrapped */
@media (min-width:761px) and (max-width:1239px){
  .sv-nav{position:static;}
  .sv-group{scroll-margin-top:90px;}
}