/* =========================================================================
   McMURRY & HUGHES — services.css
   The services teaser (home) and the services page. Built on main.css
   tokens; every class is prefixed sv- so nothing collides with the site.
   The block is the mark's vermilion marker: one capability M&H adds.
   Grey field = what your team already covers.
   ========================================================================= */

.sv-sq{display:inline-block;flex:none;width:14px;height:14px;background:var(--verm)}
.sv-sq--g{background:var(--grey)}
.sv-sq--p{background:repeating-linear-gradient(45deg,var(--verm) 0 1.4px,transparent 1.4px 4px);box-shadow:inset 0 0 0 1.4px var(--verm)}
.sv-sq--h{background:repeating-linear-gradient(45deg,var(--grey) 0 1px,transparent 1px 4px);box-shadow:inset 0 0 0 1px var(--grey)}
.sv-sq--x{background:none;box-shadow:inset 0 0 0 1px var(--hair)}
.sv-sq--d{background:none;outline:1px dashed var(--mid);outline-offset:-1px}
.sv-sq--f{background:var(--field);box-shadow:inset 0 0 0 1px var(--grey)}
.sv-sq--s{width:8px;height:8px}
.sv-sq--m{width:11px;height:11px}
.sv-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--M);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
.sv-tag--ink{color:var(--ink)}
.sv-dim{color:var(--slate)}
.sv-plus{font-family:var(--M);font-size:11px;color:var(--mid);width:14px;text-align:center;flex:none}

/* label helper */
.sv-proto{background:var(--ink);color:var(--paper);position:relative;z-index:61}
.sv-proto__in{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:center;padding-block:9px;font-family:var(--M);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.sv-proto__in span:last-child{color:rgba(252,252,250,.6)}
.sv-concept{display:inline-flex;align-items:center;gap:8px}

/* audience switch */
.sv-who__opts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.sv-opt{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border:1px solid var(--hair);background:none;cursor:pointer;font-family:var(--A);font-size:16px;font-weight:500;color:var(--ink);transition:border-color var(--t-fast) linear,background-color var(--t-fast) linear,color var(--t-fast) linear}
.sv-opt:hover{border-color:var(--ink)}
.sv-opt[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* mini mark: frame + grey field + one marker per capability */
.sv-smark{position:relative;width:84px;height:56px;border:1.5px solid var(--ink);flex:none;background:var(--paper)}
.sv-smark__f{position:absolute;left:3px;bottom:3px;width:40%;height:46%;background:var(--field)}
.sv-smark i{position:absolute;width:7px;height:7px;background:var(--verm)}
.sv-smark i.p{background:repeating-linear-gradient(45deg,var(--verm) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 0 1px var(--verm)}

/* setup cards */
.sv-setups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.sv-setup{display:flex;flex-direction:column;gap:16px;padding:26px;border:1px solid var(--hair);background:var(--paper);min-width:0;transition:border-color var(--t-fast) linear}
.sv-setup:hover{border-color:var(--ink)}
.sv-setup--sub{border-color:var(--ink)}
.sv-setup__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sv-setup__name{font-weight:700;font-size:clamp(23px,2vw,28px);letter-spacing:-.034em;line-height:1.04;margin-top:10px;text-wrap:balance}
.sv-setup__for{font-size:15.5px}
.sv-setup__list{border-top:1px solid var(--ink)}
.sv-setup__list li{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--hairsoft);font-size:15px;color:var(--ink)}
.sv-setup__list li .sv-tag{margin-left:auto}
.sv-setup__model{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:baseline}
.sv-setup__model dd{font-size:15px;color:var(--ink);margin:0}
.sv-setup__foot{margin-top:auto;padding-top:4px}

/* home teaser */
.sv-home__head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:end;margin-bottom:clamp(36px,4vw,56px)}
.sv-home__head .say{max-width:14ch}
.sv-home__foot{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;margin-top:clamp(32px,4vw,48px);padding-top:22px;border-top:1px solid var(--ink)}
.sv-home__foot .small{max-width:52ch;margin-right:auto}

/* services page hero */
.sv-hero{padding-top:clamp(132px,14vw,190px);padding-bottom:clamp(48px,6vw,88px)}
.sv-hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,104px);align-items:end}
.sv-hero .say{max-width:11ch}
.sv-paths{border-top:1px solid var(--ink)}
.sv-path{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--hairsoft)}
.sv-path__n{font-family:var(--M);font-weight:500;font-size:12px;letter-spacing:.2em;color:var(--verm)}
.sv-path__t{font-weight:600;font-size:20px;letter-spacing:-.022em;color:var(--ink)}
.sv-path p{font-size:15px;margin-top:4px}
.sv-path__go{font-family:var(--M);font-size:14px;color:var(--ink);transition:transform var(--t-fast) linear}
.sv-path:hover .sv-path__go{transform:translateX(3px)}

/* builder */
.sv-builder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,4vw,72px);align-items:start}
.sv-colhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--ink);margin-bottom:18px}
.sv-grp + .sv-grp{margin-top:40px}
.sv-grp__h{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.sv-grp__t{font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.sv-grp__n{font-size:14px;color:var(--slate)}
.sv-svcs{display:flex;flex-direction:column;gap:12px}
.sv-svc{display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:20px 22px 12px;border:1px solid var(--hair);background:var(--paper);transition:border-color var(--t-fast) linear,transform .45s var(--ease),box-shadow .45s var(--ease)}
.sv-can-drag .sv-svc:not(.is-in){cursor:grab;-webkit-user-select:none;user-select:none}
.sv-svc:not(.is-in):hover{border-color:var(--ink)}
.sv-svc__sock{width:44px;height:44px;border:1px solid var(--hair);display:grid;place-items:center;transition:border-color var(--t-fast) linear}
.sv-svc:not(.is-in):hover .sv-svc__sock{border-color:var(--ink)}
.sv-svc__sock .sv-sq{width:16px;height:16px;transition:background-color var(--t-fast) linear}
.sv-svc:not(.is-in):hover .sv-svc__sock .sv-sq--g{background:var(--verm)}
.sv-svc:not(.is-in):hover .sv-svc__sock .sv-sq--h{background:repeating-linear-gradient(45deg,var(--verm) 0 1.4px,transparent 1.4px 4px);box-shadow:inset 0 0 0 1.4px var(--verm)}
.sv-svc.is-lift .sv-svc__sock .sv-sq,.sv-svc.is-in .sv-svc__sock .sv-sq{visibility:hidden}
.sv-svc.is-in .sv-svc__name,.sv-svc.is-in p{color:var(--mid)}
.sv-svc__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.sv-svc__name{font-weight:600;font-size:20px;letter-spacing:-.026em;line-height:1.15;color:var(--ink)}
.sv-svc__by{font-family:var(--M);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin-top:4px}
.sv-svc p{font-size:15px;margin-top:8px;max-width:52ch}
.sv-svc__inc{margin-top:10px;font-family:var(--M);font-size:11px;letter-spacing:.06em;line-height:1.8;color:var(--slate)}
.sv-svc__inc span+span::before{content:" · ";color:var(--grey)}
.sv-svc__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 16px;margin-top:10px;padding-top:4px;border-top:1px solid var(--hairsoft)}
.sv-svc__model{font-family:var(--M);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sv-svc__model b{font-weight:400;color:var(--mid);margin-right:8px}
.sv-svc__state{font-family:var(--M);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);display:inline-flex;gap:14px;align-items:center}
.sv-hint{font-family:var(--M);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mid)}
.sv-no-drag .sv-hint--drag{display:none}
.sv-can-drag .sv-only-touch{display:none}

.sv-col--setup{align-self:stretch}
.sv-side{position:sticky;top:24px}
.sv-frame-wrap{container-type:inline-size}
.sv-frame{position:relative;aspect-ratio:3/2;max-width:100%;border:1.5px solid var(--ink);background:var(--paper);outline:2px solid transparent;outline-offset:6px;transition:outline-color var(--t-fast) linear}
.sv-frame.is-target{outline-color:var(--ink)}
.sv-frame__team{position:absolute;left:8px;bottom:8px;width:40%;height:46%;background:var(--field);display:flex;align-items:flex-end;padding:12px}
.sv-frame__team span{font-family:var(--M);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.sv-frame__empty{position:absolute;right:7%;top:12%;width:44%;font-family:var(--M);font-size:11px;letter-spacing:.14em;line-height:1.7;text-transform:uppercase;color:var(--mid)}
.sv-frame__empty .sv-sq{margin-bottom:12px;display:block}
.sv-frame.is-target .sv-frame__empty{color:var(--ink)}
.sv-mk{position:absolute;display:flex;align-items:center;gap:10px;transition:opacity var(--t) var(--ease)}
.sv-mk .sv-sq{width:22px;height:22px}
.sv-mk__l{font-family:var(--M);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap;line-height:1.3}
.sv-mk__l b{display:block;font-weight:500;color:var(--verm);letter-spacing:.2em}
.sv-mk.is-pending{opacity:0}
.sv-mk.is-pending .sv-sq{visibility:hidden}
@container (max-width:440px){.sv-mk__l span{display:none}.sv-mk .sv-sq{width:16px;height:16px}.sv-frame__team span{font-size:9px}}
.sv-frame__cap{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:14px}
.sv-frame__cap .sv-tag{font-size:10px;color:var(--mid)}
.sv-frame__by{margin-top:10px;font-family:var(--M);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);min-height:16px}

.sv-way{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:22px}
.sv-way .label{margin-right:6px}
.sv-stk{margin-top:18px;border-top:1px solid var(--ink)}
.sv-stk__row{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--hairsoft)}
.sv-stk__row.is-new{animation:sv-rowin .42s var(--ease) both}
@keyframes sv-rowin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sv-stk__row .sv-sq{width:16px;height:16px}
.sv-stk__name{font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.sv-stk__meta{font-family:var(--M);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-top:3px}
.sv-stk__modes{grid-column:2 / 4;display:flex;flex-wrap:wrap;gap:6px}
.sv-stk__plus{font-family:var(--M);font-size:12px;color:var(--mid);padding:2px 0 0 3px;line-height:1}
.sv-stk__row--need{border-bottom-style:dashed}
.sv-stk__row--need .sv-stk__name{color:var(--slate);font-weight:500}
.sv-seg{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:1px solid var(--hair);background:none;cursor:pointer;font-family:var(--A);font-size:14px;color:var(--ink);transition:border-color var(--t-fast) linear,background-color var(--t-fast) linear,color var(--t-fast) linear}
.sv-seg:hover{border-color:var(--ink)}
.sv-seg[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sv-seg em{font-style:normal;font-family:var(--M);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.72}
.sv-pair{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:14px;min-height:44px;font-size:15px;color:var(--slate)}
.sv-pair .label{display:inline}
.sv-loaded{font-family:var(--M);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-top:12px;min-height:16px}

/* result */
.sv-result{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,104px);align-items:start}
.sv-formula{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px;font-weight:700;font-size:clamp(26px,3vw,42px);letter-spacing:-.038em;line-height:1.05;color:var(--ink)}
.sv-formula .sv-sq{width:.42em;height:.42em}
.sv-formula__plus{font-weight:400;color:var(--grey)}
.sv-formula--empty{color:var(--mid);font-weight:600}
.sv-explain{margin-top:24px}
.sv-facts{border-top:1px solid var(--ink)}
.sv-facts div{display:grid;grid-template-columns:minmax(120px,.42fr) minmax(0,1fr);gap:16px;padding:15px 0;border-bottom:1px solid var(--hairsoft)}
.sv-facts dt{font-family:var(--M);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);padding-top:3px}
.sv-facts dd{margin:0;font-size:16px;color:var(--ink);line-height:1.5}
.sv-facts .sv-note{display:flex;gap:10px;align-items:baseline;margin-top:8px;font-size:14px;color:var(--slate)}
.sv-result__go{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;margin-top:28px}
.sv-copied{font-family:var(--M);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--confirmed)}

/* the sheet */
.sv-dlg{border:1px solid var(--ink);border-radius:0;padding:0;background:var(--paper);color:var(--ink);width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
.sv-dlg::backdrop{background:rgba(14,15,18,.42)}
.sv-dlg[open]{animation:sv-sheet .42s var(--ease-depth)}
@keyframes sv-sheet{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.sv-sheet{padding:clamp(24px,4vw,40px)}
.sv-sheet__top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
.sv-carry{margin:20px 0 24px;padding:16px 18px;border:1px solid var(--hair);background:var(--bone)}
.sv-carry ul{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.sv-carry li{display:flex;gap:12px;align-items:center;font-size:15px;color:var(--ink)}
.sv-carry li small{font-family:var(--M);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-left:auto;text-align:right}
.sv-sent{display:none}
.sv-sent.is-on{display:block}
.sv-sent pre{margin-top:18px;padding:16px;border:1px solid var(--hair);font-family:var(--M);font-size:12px;line-height:1.7;white-space:pre-wrap;color:var(--slate);background:var(--bone);overflow-x:auto}

/* internal notes */
.sv-notes summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--hairsoft)}
.sv-notes summary::-webkit-details-marker{display:none}
.sv-notes__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-top:28px}
.sv-notes__grid li{display:flex;gap:10px;align-items:baseline;font-size:15px;color:var(--slate);padding:7px 0;border-bottom:1px solid var(--hairsoft)}
.sv-notes__grid h3{font-family:var(--M);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.sv-disclaimer{font-family:var(--M);font-size:11px;letter-spacing:.06em;line-height:1.7;color:var(--slate);max-width:96ch;margin-top:20px}

/* drag */
.sv-ghost{position:fixed;left:0;top:0;z-index:90;pointer-events:none;display:flex;align-items:center;gap:8px;will-change:transform}
.sv-ghost .sv-sq{width:22px;height:22px}
.sv-ghost__l{margin-left:4px;font-family:var(--M);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--paper);padding:4px 8px;border:1px solid var(--ink)}
.sv-flyer{position:fixed;left:0;top:0;z-index:91;pointer-events:none;transform-origin:0 0;will-change:transform}
body.sv-dragging,body.sv-dragging *{cursor:grabbing!important;user-select:none}

.sv-mbar{display:none}
@media (max-width:1100px){.sv-setups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .sv-home__head,.sv-hero__grid,.sv-builder,.sv-result{grid-template-columns:1fr}
  .sv-setups{grid-template-columns:1fr}
  .sv-side{position:static}
  .sv-builder .sv-col--setup{order:-1}
  .sv-notes__grid{grid-template-columns:1fr}
  .sv-mbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;gap:14px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--ink);transform:translateY(110%);transition:transform var(--t) var(--ease)}
  .sv-mbar.is-on{transform:none}
  .sv-mbar__sq{display:flex;gap:5px}
  .sv-mbar__t{font-family:var(--M);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
  .sv-mbar .act{margin-left:auto}
  .sv-seg{min-height:44px}
}
@media (max-width:560px){
  .sv-tag{white-space:normal}
  .sv-path{grid-template-columns:36px minmax(0,1fr)}
  .sv-path__go{display:none}
  .sv-setup{padding:20px}
  .sv-svc{grid-template-columns:36px minmax(0,1fr);gap:14px;padding:18px 16px 10px}
  .sv-svc__sock{width:36px;height:36px}
  .sv-facts div{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){.sv-stk__row.is-new,.sv-dlg[open]{animation:none}}

/* first-visit hint: the card lifts, a shadow of its block travels to the frame */
.sv-svc.sv-demo-lift{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 14px 28px -18px rgba(14,15,18,.42)}
.sv-svc.sv-demo-lift .sv-svc__sock{border-color:var(--ink)}
.sv-svc.sv-demo-lift .sv-svc__sock .sv-sq--g{background:var(--verm)}
.sv-demo-ghost{position:fixed;left:0;top:0;z-index:89;pointer-events:none;display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .3s linear;will-change:transform,opacity}
.sv-demo-ghost.is-on{opacity:.9}
.sv-demo-ghost .sv-sq{width:16px;height:16px;box-shadow:0 10px 18px -6px rgba(211,58,26,.5),0 2px 4px rgba(14,15,18,.12)}
.sv-demo-ghost__l{font-family:var(--M);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--paper);padding:4px 8px;border:1px solid var(--hair);white-space:nowrap}
.sv-frame.sv-hint{outline-color:var(--hair)}
.sv-frame.sv-hint .sv-frame__empty{color:var(--ink)}
.sv-frame.sv-hint .sv-frame__empty .sv-sq{box-shadow:inset 0 0 0 1px var(--ink)}
.sv-svc .act.sv-demo-tap{background:var(--ink);color:var(--paper);text-decoration-color:transparent;padding-inline:10px}
.sv-svc .act{transition:text-decoration-color var(--t-fast) linear,background-color .3s linear,color .3s linear,padding .3s var(--ease)}